How to make clearInterval() work in JavaScript

Question

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?

Relevant code:

<script>
    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) > 2000)
        {
            clearInterval(go);
        }
    }
</script> 
</head> 
<body style="background-color:gray;" onmouseover = "runner_go();">
    <div>
       <h1>Running!</h1>
    </div>
    <img src="images/runner_l.png" alt ="running man" style="position:relative; visibility:hidden;" id = "runner"/> 
</body>

Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Ivar, Oct 19 '21 at 18:12
`go` is not in scope when you attempt to call `clearInterval`. `const` declares a variable with block scope, even var would only let you declare it with function scope. — phuzi, Oct 19 '21 at 18:13

score 0 · Answer 1 · answered Oct 19 '21 at 18:23

Problem -

You declared the interval variable as a constant within another function which is not accessible by the move_left function

So just move your interval variable to global scope (outside the function) and it should work

let go;
function runner_go() {
    var load_time = performance.now();
    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) > 2000) {
        clearInterval(go);
    }
}

sample on how intervals and clearIntervals work

let interval, i = 1;

function start() {
    interval = setInterval(log, 1000);
}

function log() {
    if (i >= 5) clearInterval(interval);
    console.log(`Test ${i}`);
    i++
}

start();

score 0 · Accepted Answer · answered Oct 19 '21 at 18:32

You need to create the var 'go' outside the method cause of the scope, also if you let on the 'body' the 'onmouseover' it will set the interval everytime.

Try this code to test:

    <head>
<script>
     let go = null;    
     function runner_go()
    {
        var load_time = performance.now();
        
        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) > 2000)
        {
            clearInterval(go);
        }
    }
</script> 
</head> 
<body style="background-color:gray;" onclick = "runner_go();">
<div>
    <h1>Running!</h1>
</div>
<img src="images/runner_l.png" alt ="running man" style="position:relative; visibility:hidden;" id = "runner"/> </body>

Thank you! I had tried this a few different ways (including changing variable scope...) and the onmouseover seemed to be causing the biggest problem. I changed to onclick and made go a global variable as you suggested. — ridonky, Oct 19 '21 at 18:42

How to make clearInterval() work in JavaScript

2 Answers2