Reset a Count Up Timer in Javascript

user_9235946 0
Viewed 441

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

dom html javascript
3 Answers

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>

user_2196610

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
}
user_13522880

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

user_104020700
Related