Question 43083 in Html Question posted in
Some basic documentation can be found here.

Reset countdown timer when button is pressed? – Html

I have a button where when pressed the timer starts counting down. I am having a hard time figuring out how to reset the countdown timer once that same button is pressed.

I am also wondering why my time is stopping at 0:1??

let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')


let myTimer = null

function timer() {

  if (myTimer !== null) {
    clearInterval(myTimer)
  }

  myTimer = setInterval(function timer() {
    let seconds = time % 60
    let minutes = Math.floor(time / 60)
    seconds = seconds < 10 ? '0' + seconds : seconds
    time--;
    if (time >= 0) {
      spaceForTime.innerHTML = `${minutes}:${seconds}`

    } else if (time === 0) {
      spaceForTime.innerText = "Move onto the next question!"
      clearInterval(time)
    }
  }, 1000);
}
<div id="button">
  <button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>
Tags:

5

Answers


  1. 0

    You need to redeclare the startingCount and time variables ater you clear the previous interval inside timer().

    let startingCount = 5
let time = 0 // set this inside timer()
let spaceForTime = document.getElementById('countdown')

let myTimer = null

function timer() {

  if (myTimer !== null) {
    clearInterval(myTimer)
  }
  
  time = startingCount * 60 // initialize the time here

  myTimer = setInterval(function timer() {
    let seconds = time % 60
    let minutes = Math.floor(time / 60)
    seconds = seconds < 10 ? '0' + seconds : seconds
    time--;
    if (time >= 0) {
      spaceForTime.innerText = `${minutes}:${seconds}`
    } else {
      spaceForTime.innerText = "Move onto the next question!"
      clearInterval(time)
    }
  }, 1000);
}
    <div id="button">
  <button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>
    Login or Signup to reply.
  2. 0

    add a check in your timer function to see if the timer is already running. If it is, clear the interval and reset the time to its starting value before starting the timer again

    let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')
let myTimer = null

function timer() {
  if (myTimer !== null) {
    clearInterval(myTimer)
    time = startingCount * 60
  }

  myTimer = setInterval(function() {
    let seconds = time % 60
    let minutes = Math.floor(time / 60)
    seconds = seconds < 10 ? '0' + seconds : seconds

    if (time >= 0) {
      spaceForTime.innerHTML = `${minutes}:${seconds}`
      time--;

    } else {
      spaceForTime.innerText = "Move onto the next question!"
      clearInterval(myTimer)
    }
  }, 1000)
}
    Login or Signup to reply.
  3. 0

    You have to change that in your code:

    let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')


let myTimer = null

function timer() {
 startingCount = 5;<---------
 if (myTimer !== null) {
   clearInterval(myTimer)
 }

myTimer = setInterval(function timer() {
let seconds = time % 60
let minutes = Math.floor(time / 60)
seconds = seconds < 10 ? '0' + seconds : seconds
time--;
if (time >= 0) {
  spaceForTime.innerHTML = `${minutes}:${seconds}`

} else{ <---------
  spaceForTime.innerText = "Move onto the next question!"
  clearInterval(time)
}
}, 1000);
}
    Login or Signup to reply.
  4. 0

    The reason the timer stops at 0:01 is because first, you set the minutes and seconds variables, then you decrease time. You need to decrease time before setting the minutes and seconds variables.

    Login or Signup to reply.
  5. 0

    A few points to consider:

    First, the timer isn’t resetting because you are not resetting the value of time (as others have mentioned).

    Second, The reason it stops at 0:01 is because your time-- comes before your if conditions, so the condition is evaluating time == -1 on the iteration where it should show 0 second. The execution being:

    --> currently showing 0:01.
--> new seconds calculated to be 00
--> time-- results in time = -1
--> condition fails since time < 0
--> does not show updated seconds

    To resolve that, move the time-- to the end of the interval function (aka after the if conditions).

    Third, your else if condition is never accessed since you put >= in your if condition. It should be changed to strictly larger >.

    Code with the above changes:

    let startingCount = .1;
let time = startingCount * 60;
let spaceForTime = document.getElementById('countdown');

let myTimer = null;

function timer() {

  if (myTimer !== null) {
    clearInterval(myTimer);
    time = startingCount * 60;
  }


  myTimer = setInterval(function timer() {
    let seconds = time % 60;
    let minutes = Math.floor(time / 60);
    seconds = seconds < 10 ? '0' + seconds : seconds;
    if (time > 0) {
      spaceForTime.innerHTML = `${minutes}:${seconds}`;

    } else if (time === 0) {
      spaceForTime.innerText = "Move onto the next question!";
      clearInterval(time);
    }
    time--;
  }, 1000);
}
    <div id="button">
  <button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>

    Note: shortened time to 6 seconds for faster demonstration

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search