Reset javascript function

Question

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>

KV Prajapati · Accepted Answer · 2012-07-02 13:58:30Z

1

Call the clearInterval() method.

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

answered Jul 2, 2012 at 13:58

KV Prajapati

94.8k20 gold badges151 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Peterson · Accepted Answer · 2012-07-02 13:58:48Z

1

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

answered Jul 2, 2012 at 13:58

Jeremy Peterson

6665 silver badges8 bronze badges

4 Comments

Florian Margaine Over a year ago

Recommending global variables isn't the way to go, however (jslint will bite you).

Anthony Grist Over a year ago

@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 Over a year ago

Agreed, though it doesn't seem to be the question he's asking.

Florian Margaine Over a year ago

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

iambriansreed · Accepted Answer · 2012-07-02 14:03:35Z

0

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>

answered Jul 2, 2012 at 14:03

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

1 Comment

Rubioli Over a year ago

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

Sirko · Accepted Answer · 2012-07-02 14:05:43Z

0

You have two errors in your code:

First, in the button you missed the () after the function's name in order to make an actual call:

<button onclick = "resetTimer()">Reset</button>

Second, you did not stop the interval using window.clearInterval() (MDN docu), so the timer went on and on.

// just to make it an explicit global variable. already was an implicit one.
var action;

// rest of your code
function resetTimer() {
    // clear the timer
    window.clearInterval( action );
    // reset variables
    var seconds = 0;
    var minutes = 0;
    // update output
    document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
 }

I set up a working fiddle here.

edited Jul 2, 2012 at 14:05

answered Jul 2, 2012 at 14:00

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Collectives™ on Stack Overflow

Reset javascript function

4 Answers 4

Comments

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related