[解決済み] JavascriptでclearIntervalが動作しない

質問

これは、私がこれまでに持っているコードです。

<div>
    <img src="robot.png" id="robotPic">
</div>
<br />
<br />
<input type="button" name="Start" value="Start" id="Start" onclick="moveImage();">
<script type="text/javascript">
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);
    }
}
</script>

なぜか robotPic をクリックしても動きが止まりません。 Start をもう一度押すと、なぜかエラーが発生します。

どうすればいいですか？

インターバルリファレンス robotMoving はその関数スコープの中だけで生きています。つまり、その関数を実行するたびに（しかも何度も）未定義に設定されてしまうのです。この問題を解決するには、変数 robotMoving を関数の外に出して、内部からその値を変更するだけです。