clearInterval not working in Javascript
<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>