title: Move square to right on every click
body: <p>As I wrote in the title, when user clicks on the square it should move 100px to the right and after next click it should move 100px again to the right but square is going back to left. How can I fix this?</p>
  <p>Also in JSFiddle code is working but when I open this on Chrome it's giving me error:<br />
  Cannot read properties of null (reading 'addEventListener')</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;JavaScript animation&lt;/title&gt;
      &lt;style&gt;
          #square {
              width: 100px;
              height: 100px;
              background-color: #333;
              position: absolute;
              left: 0px;
              top: 100px;
  
              transition-duration: 3s;
              transition: left 1.5s ease-in-out;
          }
  
          #square.active {
              left: calc(100px);
              transition: left 1.5s ease-in-out;
          }
      &lt;/style&gt;
      &lt;script&gt;
          const square = document.querySelector('#square');
  
          square.addEventListener('click', toggleActive);
  
          function toggleActive() {
              square.classList.toggle('active');
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;square&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/f3s8Lbky/2/" rel="nofollow noreferrer">JS Fiddle link</a></p>