title: rotating a square on the click of a button in javascript
body: <p>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.</p>
  <pre><code>// storing a button which has the id rotate1 in a variable
  let button = document.querySelector(&quot;#rotate1&quot;);
  
  // storing the square which has an id 'square' in a variable
  let square = document.querySelector(&quot;#square&quot;);
  
  let degree = 0;
  
  // calling a function rotate on every 10 milliseconds
  let a = setInterval(rotate , 10);
  
  // defing rotate function
  function rotate(){
      button.onclick = ()=&gt;{
              
         //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&gt;=360){
              clearInterval(a);
      }
  
          // else incrementing degree and rotating the square.
          else{
              degree++;
              rotate1.style.transform = &quot;rotateX(&quot;+degree+&quot;deg)&quot;
      }
      }
  }
  </code></pre>
  <p>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.</p>
  <p>html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;link rel = &quot;stylesheet&quot; href = &quot;practise.css&quot;&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1 id=&quot;square&quot;&gt;&lt;/h1&gt;
      &lt;button id=&quot;rotate1&quot;&gt;Rotate&lt;/button&gt;
      &lt;script src=&quot;practise.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>