title: How to make clearInterval() work in JavaScript
body: <p>I want to make an element (id=runner) move across the page by n pixels after a mouseover event, then stop at a certain position (left = 2000px), using setInterval() to repeatedly call move_left(), then clearInterval() when left == 200px.  I can make the element move, but when I look in developer tools it never stops - left continues to increase.  I am pretty new to JavaScript/HTML/CSS. How do I make it stop?</p>
  <p>Relevant code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
      function runner_go()
      {
          var load_time = performance.now();
          const go = setInterval(move_left,20);
      }
  
      function move_left()
      {
          document.getElementById('runner').style.visibility = "visible";
          var runner_position = getComputedStyle(document.getElementById('runner')).getPropertyValue('left');
          document.getElementById('runner').style.left = parseInt(runner_position,10) + 17 + "px";
          if (parseInt(runner_position,10) &gt; 2000)
          {
              clearInterval(go);
          }
      }
  &lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body style="background-color:gray;" onmouseover = "runner_go();"&gt;
      &lt;div&gt;
         &lt;h1&gt;Running!&lt;/h1&gt;
      &lt;/div&gt;
      &lt;img src="images/runner_l.png" alt ="running man" style="position:relative; visibility:hidden;" id = "runner"/&gt; 
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>