timer pop up wont stop looping when time is up - javascript

trying to create a timer that starts when button is clicked and send a pop up when time is up on my game
I have tried breaking the loop but when this happens pop up no longer appears
document.getElementById('start').addEventListener('click', function (){
var oneMinute = 60,
display = document.querySelector('.timer');
startTimer(oneMinute, display);
render();
});
function startTimer(duration, display){
var timer = duration, minutes, seconds;
setInterval(function (){
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
document.querySelector('button').addEventListener('click', function(){
render();
})
if (--timer <= 0) {
timer = "0.00";
clearInterval(timer);
swal.fire(`YOU FAILED FINAL SCORE ${points}`)
}
}, 1000)
};
render();```

Your issue is here var timer = duration and here clearInterval(timer).
duration is a parameter and not an interval ID which clearInterval requires that's set by setInterval.
So really you want to reference the interval and clear by the same reference.
var interval = setInterval(function (){
...
}, 1000);
Replace your clearInterval(timer); with clearInterval(interval);

Related

Resetting the setInterval puts it in a multiple loop interval instead

In this JSfiddle, I have a code where if you click on the button, it automatically creates another set interval within the old one,
I have clearInterval but for some reason, it's not working
(Try clicking on the timer button multiple times)
<span>LIVE: Election results will refresh in <span id="time">2:00</span> minutes.</span>
<input type="button" value="Timer" id="btn">
<script>
$("#btn").on('click', function() {
var twoMinutes = 60 * 2,
display = document.querySelector('#time');
startTimer(twoMinutes, display);
});
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
var interval;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
} </script>
enter link description here
Problem is because you're calling the interval var within the function scope, while you should be declaring it on a global scope, try this
var interval; // global var
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
clearInterval(interval);
interval = setInterval(function() {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? +minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
LoadCandidatesCharts(true);
}
}, 1000);
}

How do I stop 10 seconds timer in Javascript?

I can't seems to be able to stop the timer when it reaches zero. It will just repeat back to the original timing! See my codes below.
What I am trying to achieve is, once timer is 0, it will replace 00:00 with the text "Your time is up".
HTML:
<div class="quizTimer right">
<span>Timer:<br /><span id="qTimer"></span></span>
</div>
This is the Javascript which I did:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
console.log(display.textContent);
if (--timer < 0) {
timer = duration;
clearInterval(timer); // this piece of code didnt stop the timer
}
}, 1000);
}
window.onload = function () {
var oneMinute = 10 * 1,
display = document.querySelector('#qTimer');
startTimer(oneMinute, display);
};
clearInterval() expects a reference to the interval to be passed.
You're passing timer, which is not a reference to the interval - it's an integer from the passed-in function param.
Assign your interval to a variable and reference that when you want to clear it.
let foo = setInterval(() => {
/* code... */
clearInterval(foo);
}, 1000);
You just need to capture the interval id returned by setInterval() and use that:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var id = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
console.log(display.textContent);
if (--timer < 0) {
timer = duration;
clearInterval(id); // uses returned id
}
}, 1000);
}

How do you make a reset button for a timer?

I need the timer to reset when you click a button. I need the reset button because the user can revisit a timer multiple times but the timer displays the timer time from when it was previously used + the timers current time.
Here is a snippet of one of the timers with it's designated button
Link to code: http://jsfiddle.net/bw2dfkyu/
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = 0;
}
}, 1000);
}
function start5Timer() {
var fiveMinutes = 60 * 5,
display5 = document.querySelector('#time5');
startTimer(fiveMinutes, display5);
}
function show5Timer() {
document.getElementById("button").style.display = "none";
document.getElementById("timer5").style.display = "block";
}
</script>
<button id="button" onclick= "show5Timer(); start5Timer();">Starts and Shows Timer</button>
<div id=timer5 style ="display:none">
<h1><span id="time5">5:00</span></h1>
<p>click next when the timer ends *clicking nextBtn takes them to another div, I want this to also restart the time*</p>
<button onclick="takeToNextDiv(); #();">
next
</button>
</div>
you need to save the interval return value, in order to use it later and delete the interval, and by doing so, resetting the timer and starting it over.
the setInterval returns an integer, on which you can call the clearInterval function.
var interval;
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
if(interval)
clearInterval(interval)
interval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = 0;
}
}, 1000);
}

how to do i fire this code on click of a button in javascript

i'm new to JavaScript and i want this code to start with a click of a button and also in every click it should start a new different timer from zero. anyone here to help!
// add a count-down timer
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var butt = window.document.getElementById('button');
window.onload = function () { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
<h3 id="time" class="divTime"></h3>
First you need to add a button with an id of "button" to make your code work:
<button id="button">Button Text</button>
Next, each time you click the button, you want the previous interval to be cancelled, otherwise you'll end up with more and more intervals changing the content of the h3:
var intervalId
...
if (intervalId) clearInterval(intervalId)
intervalId = setInterval(function() {})
This leaves us with the following:
var intervalId;
// add a count-down timer
function startTimer(duration, display) {
if (intervalId) clearInterval(intervalId);
var timer = duration, minutes, seconds;
intervalId = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var butt = window.document.getElementById('button');
butt.onclick = function () { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
<h3 id="time" class="divTime"></h3>
<button id="button">Button Text</button>
If you want a different timer each time you click, you need to add an element dynamically to the DOM to hold it.
// add a count-down timer
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function() { //i tried using ' butt.onclick' but this did not work
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
startTimer(fiftenMinutes, display);
};
var butt = window.document.getElementById('button');
butt.addEventListener("click", function() {
var new_h3 = document.createElement("h3");
document.body.appendChild(new_h3);
startTimer(60*15, new_h3);
})
<h3 id="time" class="divTime"></h3>
<button id="button">Start timer</button>
Just add event listener to the button and clear already set timer, if it has been set. Run the following snippet.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
return setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds + ' Click to Restart';
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var timerID = null;
// replace 'time' if the h3 element isn't the button.
document.getElementById( 'time' ).addEventListener( 'click', function() {
if ( timerID ) {
clearInterval( timerID );
}
var fiftenMinutes = 60 * 15,
display = document.querySelector('#time');
timerID = startTimer(fiftenMinutes, display);
})
<h3 id="time" class="divTime">Click To Start Timer</h3>

How do i reset the timer in javascript/Jquery?

I have a timer that begins when my application loads. But i want to reset my timer on click of button. But when i try to reset the timer weird values starts getting displayed in timer section.
Please find my code below:
HTML:
<font size="4"><span class="myClass" id="time">02:00</span></font>
<button onclick="myFunction()">Click me</button>
Javascript:
$( document ).ready(function()
{
var minute = 60 * 2,
display = document.querySelector('#time');
begin(minute, display);
});
function myFunction()
{
var minute = 60 * 2,
display = document.querySelector('#time');
begin(minute, display);
}
function begin(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0)
{
timer = duration;
}
}, 1000);
}
I think you have multiple intervals running at the same time so you need to clean them up using clearInterval(interval);
$( document ).ready(function()
{
var minute = 60 * 2,
display = document.querySelector('#time');
begin(minute, display);
});
var interval;
function myFunction()
{
var minute = 60 * 2,
display = document.querySelector('#time');
clearInterval(interval);
begin(minute, display);
}
function begin(duration, display) {
var timer = duration, minutes, seconds;
interval = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0)
{
timer = duration;
}
}, 1000);
}
something like this.
Try to reference your Interval with a variable.
var myInterval = setInterval(function(){
....
....
....
},1000);
// Button Click ->
clearInterval(myInterval);
In your my function reset the timer value using innerHTML or innerTEXT
function myFunction()
{
var minute = 60 * 2,
display = document.querySelector('#time');
display.innerHTML = '02:00';
begin(minute, display);
}
You need to stop the setInterval. So make a global variable var refreshIntervalId = null. Inside begin() function, insert this line at the top
if (refreshIntervalId) {
clearInterval(refreshIntervalId);
}
and call setInterval like this
refreshIntervalId = setInterval(function () { ..
That is good enough.
Javascript setInterval() method returns an interval Id which can be used to terminate/stop the interval. Using clearInterval() function the the loop of method execution can be stopped.
In you case just store the interval Id and on click event function add the clearInterval(intervalId) function and pass the interval Id.
var intervalId = null;
myFunction(){
if(intervalId != null){
clearInterval(intervalId);
}
var minute = 60 * 2;
display = document.querySelector('#time');
begin(minute, display);
}
Store the interval Id
intervaluId = setInterval(function(){ ....
},1000)

Categories