CODEWITHSUNDEEP
javascript
InFlames82
InFlames82

Reputation: 513

Reset multiple timers in JS

I try to create a website with multiple timers. I used a script from a website. But in this script is it not possible to reset one timer or both timers. I want to start timer1 again from the beginning, so I have to reset the timer first. How can I reset the timer/s to start it with a new value??

In the end, I want to start Timer1, after that start Timer2 with the remaining time from Timer1 + the new time of Timer2.

function countdown(element, minutes, seconds) {
  // Fetch the display element
  var el = document.getElementById(element);

  // Set the timer
  var interval = setInterval(function() {
    if (seconds == 0) {
      if (minutes == 0) {
        (el.innerHTML = "STOP!");

        clearInterval(interval);
        return;
      } else {
        minutes--;
        seconds = 60;
      }
    }

    if (minutes > 0) {
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
    } else {
      var minute_text = '';
    }

    var second_text = seconds > 1 ? '' : '';
    el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
    seconds--;
  }, 1000);
}

//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');

start1.onclick = function() {
  countdown('countdown1', 0, 15);
}

start2.onclick = function() {
  countdown('countdown2', 0, 10);
}
<html>

<head>
</head>

<body>
  <div id='countdown1'></div>
  <div id='countdown2'></div>
  <input id="timer1" type="button" value="Start timer 1" />
  <input id="timer2" type="button" value="Start timer 2" />
</body>

</html>

Thanks for your help

Upvotes: 0

Views: 244

Answers (2)

gurvinder372
gurvinder372

Reputation: 68433

You can bind the interval as a property to the element itself.

  if ( el.interval )
  {
      clearInterval( el.interval );
  }
  // Set the timer
  var interval = el.interval = setInterval(function() {

Demo

function countdown(element, minutes, seconds) {
  // Fetch the display element
  var el = document.getElementById(element);
  if ( el.interval )
  {
      clearInterval( el.interval );
  }
  // Set the timer
  var interval = el.interval = setInterval(function() {
    if (seconds == 0) {
      if (minutes == 0) {
        (el.innerHTML = "STOP!");

        clearInterval(interval);
        return;
      } else {
        minutes--;
        seconds = 60;
      }
    }

    if (minutes > 0) {
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
    } else {
      var minute_text = '';
    }

    var second_text = seconds > 1 ? '' : '';
    el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
    seconds--;
  }, 1000);
}

//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');

start1.onclick = function() {
  countdown('countdown1', 0, 15);
}

start2.onclick = function() {
  countdown('countdown2', 0, 10);
}
<html>

<head>
</head>

<body>
  <div id='countdown1'></div>
  <div id='countdown2'></div>
  <input id="timer1" type="button" value="Start timer 1" />
  <input id="timer2" type="button" value="Start timer 2" />
</body>

</html>

Upvotes: 1

Liam
Liam

Reputation: 29760

You need a return and store a reference to your variable that holds the interval (interval) you can then call clearinterval on the handle:

The relevant changes are:

//variables to hold the intervals
var countdown1Interval;
var countdown2Interval;

start1.onclick = function() {
  countdown1Interval = countdown('countdown1', 0, 15);
}

start2.onclick = function() {
  countdown2Interval = countdown('countdown2', 0, 10);
}

//event to reset
resetBoth.onclick = function(){
    //null check because the button might not of been pressed
    if (countdown1Interval){
         clearInterval(countdown1Interval);
         countdown1Interval = undefined;
    }
    if (countdown2Interval){
        clearInterval(countdown2Interval);
        countdown2Interval = undefined;
    }
}

You also need to return the interval handle in countdown (return interval;)

Full snippet

function countdown(element, minutes, seconds) {
  // Fetch the display element
  var el = document.getElementById(element);

  // Set the timer
  var interval = setInterval(function() {
    if (seconds == 0) {
      if (minutes == 0) {
        (el.innerHTML = "STOP!");

        clearInterval(interval);
        return;
      } else {
        minutes--;
        seconds = 60;
      }
    }

    if (minutes > 0) {
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
    } else {
      var minute_text = '';
    }

    var second_text = seconds > 1 ? '' : '';
    el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
    seconds--;
  }, 1000);

  return interval;
}

//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');
var resetBoth = document.getElementById('resetBoth');

var countdown1Interval;
var countdown2Interval;

start1.onclick = function() {
  countdown1Interval = countdown('countdown1', 0, 15);
}

start2.onclick = function() {
  countdown2Interval = countdown('countdown2', 0, 10);
}

resetBoth.onclick = function(){
    if (countdown1Interval){
         clearInterval(countdown1Interval);
         countdown1Interval = undefined;
    }
    if (countdown2Interval){
        clearInterval(countdown2Interval);
        countdown2Interval = undefined;
    }
}
<html>

<head>
</head>

<body>
  <div id='countdown1'></div>
  <div id='countdown2'></div>
  <input id="timer1" type="button" value="Start timer 1" />
  <input id="timer2" type="button" value="Start timer 2" />
  <input id="resetBoth" type="button" value="Stop both timers" />
</body>

</html>

Upvotes: 1

Related Questions