なぜclearInterval（）が正常に動作しないのですか？

Question

私は単純なonclickアニメーションを作ろうとしています。オンクリックされたボタンは左に移動し、別のクリックが戻ってくるはずです。 clearInterval（）を設定する方法に何か問題がありますが、間違いはありません。あなたはそれで私を助けることができますか？

---

var backBack = document.getElementById('btn'); 
 
    var x = 0; 
 
    var loop = 'off'; 
 

 
    function push() { 
 
    if(loop == 'off') { 
 
    var t = setInterval(move,1); 
 
    } 
 
    if(loop == 'on') { 
 
    var t = setInterval(moveBack,1); 
 
    }} 
 

 
    function move() { 
 
    if(x < 500) { 
 
    x = x + 5; 
 
    backBack.style.left = x + 'px'; 
 
    clearInterval(t); 
 
    loop = 'on'; 
 
    }} 
 

 
    function moveBack() { 
 
    if(x > 0) { 
 
    x = x - 5; 
 
    backBack.style.right = x + 'px'; 
 
    clearInterval(t); 
 
    }}

 #btn { 
 
      position: absolute; 
 
      width: 50px; 
 
      height: 50px; 
 
      border-radius: 25px; 
 
      background-color: goldenrod; 
 
      border: none; 
 
      outline: none; 
 
     }

<button id="btn" onclick="push()" />

Answer 1

あなたは関数の外変数tの宣言を配置する必要があります。 私はあなたのコードの仕事を得るためにいくつかの変更を加えました。

このような処理を行う必要がありますか？

var backBack = document.getElementById('btn'); 
 
var x = 0; 
 
var loop = 'off'; 
 
var t; 
 

 
function push() { 
 
    if (loop == 'off') { 
 
    t = setInterval(move, 1); 
 
    } 
 
    if (loop == 'on') { 
 
    t = setInterval(moveBack, 1); 
 
    } 
 
} 
 

 
function move() { 
 
    if (x < 500) { 
 
    x = x + 5; 
 
    backBack.style.left = x + 'px'; 
 
    } else { 
 
    clearInterval(t); 
 
    loop = 'on'; 
 
    } 
 
} 
 

 
function moveBack() { 
 
    if (x > 0) { 
 
    x = x - 5; 
 
    backBack.style.left = x + 'px'; 
 
    } else { 
 
    clearInterval(t); 
 
    loop = 'off'; 
 
    } 
 
}

#btn { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 25px; 
 
    background-color: goldenrod; 
 
    border: none; 
 
    outline: none; 
 
}

<button id="btn" onclick="push()" />