Reset javascript function

javascript jquery

20,042

Solution 1

Onclick events must call functions like: onclick="resetTimer();" with the parenthesis at the end. Some browsers may try to submit on button clicks if you don't define type="button". I didn't assume you wanted reset timer to stop the timer so I added a stop button.

http://jsfiddle.net/iambriansreed/WRdSK/

<button type="button" onclick="startTimer();">Start</button>
<div id="timeBox">Time 00:00</div>

<button type="button" onclick="resetTimer();">Reset</button>
<button type="button" onclick="stopTimer();">Stop</button>

<script>

    window.seconds = 0;
    window.minutes = 0;

    function startTimer() {
        window.action = setInterval(countSecs,1000);
    }
    function resetTimer() {
        seconds = 0;
        minutes = 0;
    }
    function stopTimer() {
        clearInterval(action);        
        seconds = -1;
        minutes = 0;
        countSecs();
    }
    function zeroPad(time) {
        var numZeropad = time + '';
        while(numZeropad.length < 2) {
            numZeropad = "0" + numZeropad;
        }
        return numZeropad;
    }

    function countSecs() {
        seconds++;

        if (seconds > 59) {
             minutes++;
             seconds = 0;
        }
        document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
    }

</script>

Solution 2

This is a scoping issue, using var inside a function, makes seconds and minutes local to that function. Removing the leading var will start you off in the right direction.

function resetTimer() {
  seconds = 0;
  minutes = 0;
}

Solution 3

Call the clearInterval() method.

function resetTimer() {
   window.clearInterval(action);
 }

20,042

Author by

three3

Updated on November 22, 2022

Comments

three3 over 1 year

I am having trouble getting a javascript function to reset itself after an onclick event. When I click the "Start" button the counter begins to count up. But when I click the "Reset" button nothing happens. I need the timer to reset to "0:00" and wait for me to click "Start" again. Here is my code:

<script type="text/javascript">
var seconds = 0;
var minutes = 0;

function zeroPad(time) {
    var numZeropad = time + '';
    while(numZeropad.length < 2) {
        numZeropad = "0" + numZeropad;
    }
    return numZeropad;
}

function countSecs() {
    seconds++;

    if (seconds > 59) {
         minutes++;
         seconds = 0;
    }
    document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
}

 function startTimer() {
     action = window.setInterval(countSecs,1000);
 }


function resetTimer() {
    var seconds = 0;
    var minutes = 0;
 }

</script>

<body>
<button onclick = "startTimer()">Start</button>
<div id="timeBox">Time 00:00</div>

<button onclick = "resetTimer">Reset</button>
</body>

Florian Margaine almost 12 years

Recommending global variables isn't the way to go, however (jslint will bite you).
Anthony Grist almost 12 years

@FlorianMargaine The code already has global variables, this just means that the function that's intended to modify them does actually modify them.
Jeremy Peterson almost 12 years

Agreed, though it doesn't seem to be the question he's asking.
Florian Margaine almost 12 years

@AnthonyGrist so if the question is plain wrong, you're not correcting?
Rubioli about 4 years

When you start the timer, the timeout is 1000ms but when you reset it, it messes up the timeout and for every 1000ms, it counts up 2 seconds