how to implement start and stop buttons on javascript countdown

Question

The following code should start and stop the timer, however the "stop" button is not working. "Play" works fine. it just wont stop

var countDown;

function countDownClock() {
  var timeLeft = 5;
  var text = document.getElementById("countDownTimer");
  var countDown = setInterval(function() {
    if (timeLeft == 0) {
      clearInterval(countDown);
      text.innerHTML = "finished!";
    } else {
      text.innerHTML = timeLeft;
    }
    timeLeft -= 1;
  }, 1000);

}

<button onclick="reloadMaths()"><i class="fa fa-play"></i></button>
<button onclick="clearInterval(countDown);"><i class="fa fa-stop"></i></button>

do I need to show more JS?

originally i thought this post solved it as I did not have variable as a global variable -however, having made it global this solution is not working javascript countdown timer with start & stop buttons

Please share more details. What have you tried to resolve the problem? Where are you stuck? — Nico Haase, Jun 07 '21 at 13:29

score 2 · Accepted Answer · answered Jun 07 '21 at 13:31

2

change this line var countDown = setInterval(function() { to countDown = setInterval(function() {

With line 1 you already declared a global var countDown. Then in the function you did it again, that's why your clearInterval function won't clear the interval.

answered Jun 07 '21 at 13:31

Hank X

1,988
2
14
32

thank you, i completely missed that. been driving me mad! – the_end Jun 07 '21 at 13:35

score 1 · Answer 2 · answered Jun 07 '21 at 13:33

The main issue is that you have redefined variable "countDown" in the local scope of the function "countDownClock". The global variable (defined in the first line of your code) will stay undefined, so clearing the interval using clearInterval(countDown); is equivalent to clearInterval(undefined) what obviously is not what you want to do.

Removing the local (re-)declaration of the variable will fix your issues.

From

var countDown = setInterval(function() { ... })

To

countDown = setInterval(function() { ... })

Try out the modified code:

var countDown;

function countDownClock() {
  var timeLeft = 5;
  var text = document.getElementById("countDownTimer");
  countDown = setInterval(function() { // removed var keyword
    if (timeLeft == 0) {
      clearInterval(countDown);
      text.innerHTML = "finished!";
    } else {
      text.innerHTML = timeLeft;
    }
    timeLeft -= 1;
  }, 1000);

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<button onclick="countDownClock()"><i class="fa fa-play"></i></button>
<button onclick="clearInterval(countDown);"><i class="fa fa-stop"></i></button>
<div id="countDownTimer"></div>

score 0 · Answer 3 · answered Jun 07 '21 at 13:34

This should work:

var countDown;

function countDownClock() {
  var timeLeft = 5;
  var text = document.getElementById("countDownTimer");
  countDown = setInterval(function() {
    if (timeLeft == 0) {
      clearInterval(countDown);
      text.innerHTML = "finished!";
    } else {
      text.innerHTML = timeLeft;
    }
    timeLeft -= 1;
  }, 1000);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="countDownTimer"></div>

<button onclick="countDownClock()"><i class="fa fa-play"></i></button>
<button onclick="clearInterval(countDown);"><i class="fa fa-stop"></i></button>

The main problem with your code was that you redefined countDown in your countDownClock function. Therefore, when you were doing clearInterval(countDown), you weren't clearing the interval. You were just clearing an undefined global variable.

how to implement start and stop buttons on javascript countdown

3 Answers3