I need to start and stop a 60-second countdown by pressing the space key, all via Javascript. To do this, I thought I would have to use setInterval() and clearInterval(), however, I can't make it work. I can start the countdown, but once it has been activated I can no longer stop it. Here is my code:

var timeLeft = 60;                                                          /* countdown duration */
var isRunning = 0;                                                          /* check to see if the countdown is active or not */
document.addEventListener("keydown", function(event) {                      /* event listener */
    if (event.keyCode == 32) {                                              /* if the key pressed is space */
        if (isRunning == 0) {                                               /* if the counter isn't already active */
            var timer = setInterval(function() {                            /* i'm starting the 1sec interval */
                isRunning = 1;                                              /* the countdown is switched on */
                if (timeLeft <= 0) {                                        /* if the countdown reaches zero */ 
                    clearInterval(timer);                                   /* i'm stopping the interval */
                    document.getElementById("countdown").innerHTML = ":00";
                } else {
                    document.getElementById("countdown").innerHTML = ":"   timeLeft;
                    timeLeft -= 1;
                }
            }, 1000);
        }
        if (isRunning == 1) {                                                 /* if the countdown is active */
            isRunning = 0;                                                    /* the countdown is switched off */
            clearInterval(timer);                                             /* i'm stopping the interval */
            document.getElementById("countdown").innerHTML = ":"   timeLeft;
        }
    }
});

What am I missing? Thank you very much for your help.

CodePudding user response：

var timer is not accessible by clearInterval(timer).

move var timer to the global scope and set the interval with timer = ... instead of var timer =...

jsfiddle here

CodePudding user response：

I haven't tested this in the browser but off the top of my head, this is how I would code this.

Assumptions made: stop means restart and not pause

  let count = 60;
  let isRunning = 0;

  document.addEventListener("keydown", (e) => {
    if(e.keyCode == 32 && isRunning == 0){
      timer(count);
      isRunning = 1;
    }else{
      isRunning = 0
    } 
  })

  function timer(time){
    let timer = setInterval(function() {
      document.getElementById("countdown").innerHTML = time--;
      if(count == 0 || isRunning == 0){
        clearInterval(timer);
      }
    }, 1000)
  }

I do recommend making the timer a separate function from the eventListener, this will help your code be more reusable. I hope this helps.