start-stop-reset simple timer using jQuery

Question

I have a code that looks like this

JS

var counter = 0;
var timer = setInterval("tictac()", 1000);

function tictac(){
    counter++;
    $("#clock").html(counter);
}

HTML

<div id="clock">0</div>
<div id="buttons" class="clear">
    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>
</div>

How can I make use of the buttons to control the timer, start counting up when start button is pressed, stop counting when stop button is pressed and reset counter when reset button is pressed.

Can someone help?

I managed to do this

        $(document).ready(function($) {

            var timer = undefined;
            $('#start').on('click', function(){
                timer = window.setInterval('tictac()', 1000);
            });
            $('#pause').on('click', function(){
                window.clearInterval(timer);
            });
            $('#reset').on('click', function(){
                timer = window.clearInterval(timer);
            });

        });

        var counter = 0;
        function tictac(){
            counter++;
            $("#clock").html(counter);
        }

The start and the stop buttons do the work, but the reset won't work, can some one check what's wrong with the code? pretty please

why the "timer = window.clearInterval(timer);" won't do the job, what am I doing wrong? — Ryan Barnaby
– Ryan Barnaby, Commented Oct 16, 2013 at 15:15
Don't pass the function inside quotes to setInterval() some browsers refuse to do that now. — mike jones
– mike jones, Commented Oct 17, 2013 at 14:45

Vishal · Accepted Answer · 2013-10-16 10:58:50Z

7

try http://jsfiddle.net/vishalgupta358/DkTWN/

var counter = 0;
var timer = null;

function tictac(){
    counter++;
    $("#clock").html(counter);
}

function reset()
{
clearInterval(timer);
    counter=0;
}
function startInterval()
{
timer= setInterval("tictac()", 1000);
}
function stopInterval()
{
    clearInterval(timer);
}

answered Oct 16, 2013 at 10:58

Vishal

2561 silver badge8 bronze badges

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

3 Comments

Ryan Barnaby Over a year ago

sorry I didn't mentioned, I would like to control the timer using jQuery selectors

Vishal Over a year ago

bind the functions to the buttons on page load

SSR Over a year ago

This fiddle link is dead, Can you post another one please!!

Ryan Barnaby · Accepted Answer · 2013-10-17 14:30:52Z

1

Nailed the solution

$('#reset').on('click', function(){
    counter = -1;
    tictac();
    window.clearInterval(timer);
});

answered Oct 17, 2013 at 14:30

Ryan Barnaby

1691 gold badge5 silver badges12 bronze badges

Comments

david · Accepted Answer · 2013-10-16 10:59:21Z

0

You can utilize onclick to your button. For example: <button onclick="tictac()">. For further explanation, you can see this link. There has a demo that will solve your problem. Also, you can view the source code.

edited Oct 16, 2013 at 10:59

answered Oct 16, 2013 at 10:29

david

3,2289 gold badges33 silver badges43 bronze badges

1 Comment

Ryan Barnaby Over a year ago

I forgot to mention, I want to control the timer using jQuery selectors

Collectives™ on Stack Overflow

start-stop-reset simple timer using jQuery

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related