title: clearInterval not working in Javascript
body: <p>This is the code I have so far</p>
  
  <pre><code>&lt;div&gt;
      &lt;img src="robot.png" id="robotPic"&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;input type="button" name="Start" value="Start" id="Start" onclick="moveImage();"&gt;
  &lt;script type="text/javascript"&gt;
  var moving = false;
  var screenWidth = window.innerWidth;
  var i = 0;
  
  function moveImage() {
      if (!moving) {
          moving = true;
          var robotMoving = setInterval(function() {
              document.getElementById("robotPic").style.paddingLeft = i + "px";
              i = i + 10;
          }, 500);
      } else {
          clearInterval(robotMoving);
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>For whatever reason, the <code>robotPic</code> doesn't stop moving when I click the <code>Start</code> button again for some reason and I don't understabd</p>