Javascript Timer project: why is clearInterval not working?

Question

I am a beginner trying to learn JavaScript. My project is to make a stopwatch with stop , reset , and go .

For some reason, I can't figure out how to get clearInterval() to stop the goFunction . Any help would be appreciated.

 var min = 00 var sec = 00 var ms = 00 function goFunction() { var swTimer = setInterval(addTime, 10) function addTime() { if (ms < 99) { ms++ } else { sec += 1 ms = 0 } if (sec > 59) { min += 1 sec = 0 } msShow = (ms < 10)? "0" + ms: ms secShow = (sec < 10)? "0" + sec: sec minShow = (min < 10)? "0" + min: min document.getElementById("numbers").innerHTML = minShow + ":" + secShow + ":" + msShow } } function stopFunction() { document.getElementById("numbers").style.color = "red" clearInterval(swTimer); }

 <div class="controls"> <button onclick="goFunction()" class="button button1">GO</button> <button onclick="resetFunction()" class="button button2">RESET</button> <button onclick="stopFunction()" class="button button3">STOP</button> <div class="display" id="numbers">00:00:00</div> </div>

Answer 1

Declare your swTimer outside goFunction

 <div class = "controls"> <button onclick="goFunction()" class="button button1">GO</button> <button onclick="resetFunction()" class="button button2">RESET</button> <button onclick="stopFunction()" class="button button3">STOP</button> <div class="display" id = "numbers">00:00:00</div> </div> <script> var min = 00 var sec = 00 var ms = 00 var swTimer function goFunction() { swTimer= setInterval(addTime, 10) function addTime() { if (ms < 99) { ms++ } else { sec+=1 ms = 0 } if (sec >59 ) { min+=1 sec=0 } msShow = (ms<10)? "0" + ms: ms secShow = (sec<10)? "0" + sec: sec minShow = (min<10)? "0" + min: min document.getElementById("numbers").innerHTML = minShow + ":" + secShow + ":" + msShow } } function stopFunction() { document.getElementById("numbers").style.color = "red" clearInterval(swTimer); } </script>

Answer 2

Because swTimer is not global = it's declared and scoped at goFunction and is not defined/accessible in stopFunction .
Set it outside the functions (my opinion: before - where min , sec and ms are declared).

Answer 3

The problem is that swTimer is inside the goFunction block, declare swTimer as a global variable.

 var min = 0; var sec = 0; var ms = 0; function addTime() { if (ms < 99) { ms++ } else { sec+=1 ms = 0 } if (sec >59 ) { min+=1 sec=0 } msShow = (ms<10)? "0" + ms: ms secShow = (sec<10)? "0" + sec: sec minShow = (min<10)? "0" + min: min document.getElementById("numbers").textContent = minShow + ":" + secShow + ":" + msShow } var swTimer = setInterval(addTime, 1000); function stopFunction() { document.getElementById("numbers").style.color = "red" clearInterval(swTimer); } window.onload = addTime();

 <p id="numbers"></p> <button onclick="stopFunction()">Go!</button>

Answer 4

The interval won't get cleared because it is locally scoped. You defined in a function which means it cannot be globally accessed in another function a solution would be

 var min = 00 var sec = 00 var ms = 00 function addTime() { if (ms < 99) { ms++ } else { sec+=1 ms = 0 } if (sec >59 ) { min+=1 sec=0 } msShow = (ms<10)? "0" + ms: ms secShow = (sec<10)? "0" + sec: sec minShow = (min<10)? "0" + min: min document.getElementById("numbers").innerHTML = minShow + ":" + secShow + ":" + msShow } var swTimer function goFunction() { swTimer = setInterval(addTime, 10) } function stopFunction() { document.getElementById("numbers").style.color = "red" clearInterval(swTimer); }

 <div class = "controls"> <button onclick="goFunction()" class="button button1">GO</button> <button onclick="resetFunction()" class="button button2">RESET</button> <button onclick="stopFunction()" class="button button3">STOP</button> <div class="display" id = "numbers">00:00:00</div> </div>