Javascript unable to stop timer onclick with clearInterval

Question

I am trying to create a stopwatch on my site where I can count the time since the button was clicked. I then want to be able to stop the timer by clicking another button and store the elapsed time in a variable.

I am currently stuck at being able to stop the timer?

Everything I read seems to suggest that clearInterval will stop the timer but I am obviously not implementing it properly. Based on the below code (which is also available in this fiddle) where am I going wrong.

HTML

    <span id="start-counter">start counter</span>
    <span id="stop-counter">stop counter</span>
    <span id="counter"></span>

JS

    $("#start-counter").on("click", function(event){
    var pageVisisted = new Date();

    var test= setInterval(function() {
        var timeOnSite = new Date() - pageVisisted;
        var secondsTotal = timeOnSite / 1000;
        var minutes = Math.floor(secondsTotal / 60) % 3600;
        var seconds = Math.floor(secondsTotal)  % 60;

        document.getElementById('counter').innerHTML = minutes + ":" + seconds;
    }, 1000);
    });

    $("#stop-counter").on("click", function(event){
        //double check onclick is working
        //alert('test');
        clearInterval(test);
    });

Adil Shaikh · Accepted Answer · 2013-05-20 13:15:57Z

3

Working Demo --> http://jsfiddle.net/pyRz9/

define test in outer scope

var test;
$("#start-counter").on("click", function (event) {
    var pageVisisted = new Date();

    test = setInterval(function () {
        var timeOnSite = new Date() - pageVisisted;
        var secondsTotal = timeOnSite / 1000;
        var minutes = Math.floor(secondsTotal / 60) % 3600;
        var seconds = Math.floor(secondsTotal) % 60;

        document.getElementById('counter').innerHTML = minutes + ":" + seconds;
    }, 1000);
});

$("#stop-counter").on("click", function (event) {
    //double check onclick is working
    //alert('test');
    clearInterval(test);
});

edited May 20, 2013 at 13:15

answered May 20, 2013 at 13:08

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

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

1 Comment

ak85 Over a year ago

Simple as that, Thank You this is just what I want!

aleixfabra · Accepted Answer · 2014-06-30 10:50:16Z

0

Don’t do that

change:

var minutes = Math.floor(secondsTotal / 60) % 3600;

to:

var minutes = Math.floor(secondsTotal / 60) % 60;

answered Jun 30, 2014 at 10:50

aleixfabra

1,0953 gold badges11 silver badges24 bronze badges

Comments

Shaze · Accepted Answer · 2017-03-14 15:11:34Z

Same working demo with condition and buttons: https://jsfiddle.net/shez1461/pyRz9/59/

var test;

if($('#start-counter').length == 1){
  $("#start-counter").on("click", function (event) {
      var pageVisisted = new Date();

      test = setInterval(function () {
          var timeOnSite = new Date() - pageVisisted;
          var secondsTotal = timeOnSite / 1000;
          var minutes = Math.floor(secondsTotal / 60) % 3600;
          var seconds = Math.floor(secondsTotal) % 60;

           document.getElementById('counter').innerHTML = minutes + ":" + seconds;
      }, 900);
  });
}

  $("#stop-counter").on("click", function (event) {
      //double check onclick is working
      //alert('test');
      clearInterval(test);
  });

Collectives™ on Stack Overflow

Javascript unable to stop timer onclick with clearInterval

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related