How do I correctly use setInterval and clearInterval to switch between two different functions?

animation, clearinterval, counter, javascript, setinterval

Solution

You need to capture the return value from `setInterval( ... )` into a variable as that is the reference to the timer:

var interval;
var count = 0;

function onloadFunctions()
{
    countUp();
    interval = setInterval(countUp, 200);
}

/* ... code ... */

function countUp()
{
    document.getElementById("here").innerHTML = count;
    count++;

    if(count === 10)
    {
        clearInterval(interval);
        countUp();
        interval = setInterval(countUp, 200);
    }
}

Problem

For practice I am trying to display a number that increments from 0 - 9, then decrements from 9 - 0, and infinitely repeats. The code that I have so far seems to be close, but upon the second iteration the `setInterval` calls of my 2 respective functions `countUp` and `countDown` seem to be conflicting with each other, as the numbers displayed are not counting in the intended order... and then the browser crashes. Here is my code: ``` <!DOCTYPE html> <html> <head> <title>Algorithm Test</title> </head> <body onload = "onloadFunctions();"> <script type = "text/javascript"> function onloadFunctions() { countUp(); setInterval(countUp, 200); } var count = 0; function countUp() { document.getElementById("here").innerHTML = count; count++; if(count == 10) { clearInterval(this); countDown(); setInterval(countDown, 200); } } function countDown() { document.getElementById("here").innerHTML = count; count--; if(count == 0) { clearInterval(this); countUp(); setInterval(countUp, 200); } } </script> From 0 - 9, up and down:&nbsp;&nbsp;<div id = "here"></div> </body> </html> ```

Original source