'rotating a square on the click of a button in javascript

I made a program to rotate a square made with h1 tag on the click of a button. but it is not working. could anybody take a look at this code and say what is wrong here.

// storing a button which has the id rotate1 in a variable
let button = document.querySelector("#rotate1");

// storing the square which has an id 'square' in a variable
let square = document.querySelector("#square");

let degree = 0;

// calling a function rotate on every 10 milliseconds
let a = setInterval(rotate , 10);

// defing rotate function
function rotate(){
    button.onclick = ()=>{
            
       //stop calling when the variable degree is greater than or equal to 360deg. I am doing this for stopping the square from rotating when it has comnpleted a rotation. 
        if(degree>=360){
            clearInterval(a);
    }

        // else incrementing degree and rotating the square.
        else{
            degree++;
            rotate1.style.transform = "rotateX("+degree+"deg)"
    }
    }
}

when i click the button the square is not rotating. Why is it not rotating. I tried my best to explain the question. could anybody tell me whats wrong here and how to solve it.

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel = "stylesheet" href = "practise.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="square"></h1>
    <button id="rotate1">Rotate</button>
    <script src="practise.js"></script>
</body>
</html>

javascript

Solution 1:^[1]

currently you rotate the button #rotate1 not h1 then it rotate the element based on click not setInterval, but you can write it like below

// storing a button which has the id rotate1 in a variable
let button = document.querySelector("#rotate1");

// storing the square which has an id 'square' in a variable
let square = document.querySelector("#square");

let degree, interval;

// defing rotate function
function rotate() {
  //stop calling when the variable degree is greater than or equal to 360deg. I am doing this for stopping the square from rotating when it has comnpleted a rotation. 
  if (degree >= 360) {
    clearInterval(interval);
  }

  // else incrementing degree and rotating the square.
  else {
    degree++;
    square.style.transform = "rotateX(" + degree + "deg)"
  }
}
button.onclick = () => {
  degree = 0;
  interval = setInterval(rotate, 10);
}

h1{display: block;width: 100px;height: 100px;background: red;}

<h1 id="square"></h1>
<button id="rotate1">Rotate</button>

Solution 2:^[2]

Beat me to it but here's my solution...

// storing a button which has the id rotate1 in a variable
let button = document.getElementById("rotate1");

// storing the square which has an id 'square' in a variable
let square = document.getElementById("square");

let degree = 0;

button.onclick = function(event) {
  degree += 360;
  square.style.transform = "rotate("+degree+"deg)";
}

#square {
  height:50px;
  width:50px;
  background-color:red;
  transition:0.4s ease all;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel = "stylesheet" href = "practise.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="rotate1">Rotate</button>
    <div id="square"></div>
    <script src="practise.js"></script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	uingtea
Solution 2	MomasVII

'rotating a square on the click of a button in javascript

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]