Reset a Count Up Timer in Javascript

Question

I have a count up timer and I want to create a reset button to start from 00:00 This is my code:

<label id="minutes">00</label>
                <label id="colon">:</label>
                <label id="seconds">00</label>

setInterval(setTime, 1000);

function setTime(){
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds%60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
}

function pad(val){
    var valString = val + "";
    if(valString.length < 2)
    {
        return "0" + valString;
    }
    else
    {
        return valString;
    }
}

// reset() function
function resertTimer(){
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("seconds").innerHTML = "00";
}

When I call the reset function, it changes the timer to 00:00 but then goes back to the previous value again. Like if the value was 00:15, it changes to 00:00 then goes back to 00:16

Answer 1

Basically, you have a global variable somewhere totalSeconds which you need to also set back to zero when you reset.

 var totalSeconds = 0; // reset this to zero when you reset as below var secondsLabel = document.getElementById("seconds"); var minutesLabel = document.getElementById("minutes"); document.getElementById("reset").addEventListener("click",resertTimer); setInterval(setTime, 1000); function setTime(){ ++totalSeconds; secondsLabel.innerHTML = pad(totalSeconds%60); minutesLabel.innerHTML = pad(parseInt(totalSeconds/60)); } function pad(val){ var valString = val + ""; if(valString.length < 2) { return "0" + valString; } else { return valString; } } // reset() function function resertTimer(){ document.getElementById("minutes").innerHTML = "00"; document.getElementById("seconds").innerHTML = "00"; totalSeconds = 0 }

 <label id="minutes">00</label> <label id="colon">:</label> <label id="seconds">00</label> <button id="reset">Reset</button>

Answer 2

You're updating the DOM but not resetting the part that matters, the totalSeconds var.

function resertTimer(){
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("seconds").innerHTML = "00";
    totalSeconds = 0; //<-- add this
}

Answer 3

It is because you aren't resetting the value of totalSeconds on which the minutesLabel and secondsLabel are dependent.

Try executing the javascript code,

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds % 60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    } else {
        return valString;
    }
}

// reset() function
function resertTimer() {
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("seconds").innerHTML = "00";
    totalSeconds = 0;
}

HTMl code:

<label id="minutes">00</label>
<label id="colon">:</label>
<label id="seconds">00</label>
<button onclick="resertTimer()">reset</button>

Hope this solves your problem. Happy coding:)