Rotate a circle with 30deg when a key is pressed-CodePudding

Im trynig to make a circle with some text inside it rotate with 30deg for every time i press a button - I wrote the following code

<script>
    let margin = 40;
    let rotate = 30;
    let circle = document.getElementById("circle");

    document.addEventListener("keypress", (event) => {



    circle.style.transform = "rotate(" rotate "deg)";
    });
  </script>

However my problem is that i want to make the circle keep rotating, every time i press a button. Right now it only works when i press a single time. So the code needs to loop some kind of way i guess.

CodePudding user response：

You must increase the value by 30 each time when event keypress is called. Event keypress is no longer recommended so you should change it to keyup or keydown.

let margin = 40;
let rotate = 30;
let circle = document.getElementById("circle");

document.addEventListener("keypress", (event) => {
    circle.style.transform = "rotate(" rotate "deg)";
    rotate  = 30;
});

CodePudding user response：

Just increase the rotate value…

<script>
let margin = 40;
let rotate = 30;
let circle = document.getElementById("circle");

document.addEventListener("keypress", (event) => 
{
   circle.style.transform = "rotate(" rotate "deg)";
   rotate =30;
});