I need to make a simple countdown timer from 5 to zero, with the buttons to START and STOP the counter. The only thing that I don't know is that why won't my counter stop.
The code is presented below:
function clock() {
var myTimer = setInterval(myClock, 1000);
var c = 5;
function myClock() {
document.getElementById("demo").innerHTML = --c;
if (c == 0) {
clearInterval(myTimer);
alert("Reached zero");
}
}
}
<p id="demo">5</p>
<button onclick="clock()">Start counter</button>
<button onclick="clearInterval(myTimer)">Stop counter</button>
Here you go, you just needed to make
myTimer
global. I also fixed a glitch where after resetting the timer, it won't show 5.Quick and dirty answer
timer
in your function (because its declared,var
, inside your function) can only be accessed inside your function. Moving thevar
declaration outside your function makes it global.Better solution
But putting things in the global scope is (mostly) a bad idea. So.....there's a better way:
the better solution utilises a revealing module pattern and will hold the
timer
inside a private scope, Tl;Dr it stops thetimer
polluting the global scope.myTimer
is only in scope within the function. One solution is to make it global.