We Keep Coding

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

JavaScript count-down-timer with sopporting cancel and restart

Here i have a simple javascript which i want to making a simple CountDownTimer with cancel and restarting features, unfortunately after starting timer using setInterval that's return only 4 number in console and i can't fix that. without assuming this problem clearInterval not working to which i want to support cancel and restart again this time
<script type="text/javascript">
var fiveMinutes = 5, display = document.querySelector('#time');
let myTimer = function (){
let timer = fiveMinutes, minutes, seconds;
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) {
$('#resend').show();
$('#time').hide();
clearInterval(this);
}
console.log(timer);
};
$('#startTimer').on('click', function(){
$('#resend').hide();
$('#time').show();
setInterval(myTimer , 1000);
});
</script>

Your code fixed below. The main problem was fiveMinutes permanently being reassigned to 5, which I solved with a closure. Also it was not multiplied by 60 to be converted in seconds.
const display = document.querySelector('#time');
let interval;
function myTimer (timer) {
return function () {
let minutes, seconds;
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) {
$('#resend').show();
$('#time').hide();
clearInterval(interval);
}
console.log(timer);
}
};
$('#startTimer').on('click', function () {
$('#resend').hide();
$('#time').show();
clearInterval(interval);
interval = setInterval(myTimer(5 * 60), 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time"></div>
<button id="startTimer">Start</button>

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 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 to show alert if one minute is completed and stop script in minutes:seconds timer script using javascript

I have a requirement of one minute timer in javascript in that as soon as 1 minute completed,Then show alert and halt script but in the code i try to change the condition but is not working,So i want after one minute alert should get and stop script
<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;
// alert(timer);
if (--timer < 0) {
timer = duration;
}
// if one minute is completed show alert and stop script
}, 1000);
}
window.onload = function () {
var oneMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinutes, display);
};
</script>

<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var x=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;
// alert(timer);
if (--timer < 0) {
timer = duration;
alert('Timeup');
clearInterval(x); //script will stop and will not be execute
}
}, 1000);
}
window.onload = function () {
var oneMinutes = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinutes, display);
};
</script>