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>

Sven.hig · Accepted Answer · 2020-07-26 21:56:20Z

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>

iAmOren · Accepted Answer · 2020-07-26 21:53:24Z

0

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).

answered Jul 26, 2020 at 21:53

iAmOren

2,8122 gold badges14 silver badges23 bronze badges

Comments

sonEtLumiere · Accepted Answer · 2020-07-26 22:01:39Z

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>

opensaucerer · Accepted Answer · 2020-07-26 22:03:45Z

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>

Collectives™ on Stack Overflow

Javascript Timer project: why is clearInterval not working?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related