Develop Reference

How can I reset the timer again using clearInterval()?

I have looked at the other threads about this question, but so far I have found no solution that fits my problem. I want to create a timer that activates using an addEventListener, in which I will use a setInterval(). Then I want to have a "pause" button that can pause the setInterval(), which I did by using clearInterval().
My problem is that, once I pause my timer once, I cannot get the timer to continue counting again by clicking the same button that starts the timer in the first place. This is my code:
hour=document.getElementById("hour");
minute=document.getElementById("minute");
second=document.getElementById("second");
start=document.getElementById("start")
reset=document.getElementById("reset")
pause=document.getElementById("pause");
var countdown;
start.addEventListener("click", function clicked() {
countdown = setInterval(function() {
if (second.textContent!="59") {
let new_second=Number(second.textContent)+1;
second.textContent=new_second;
}
else {
second.textContent="00";
if (minute.textContent!="59") {
let new_minute=Number(minute.textContent)+1;
minute.textContent=new_minute;
}
else {
minute.textContent="00";
let new_hour=Number(hour.textContent)+1;
hour.textContent=new_hour;
}
}
}, 1000)
this.outerHTML=this.outerHTML;
}, false);
pause.addEventListener("click", function() {
clearInterval(countdown);
})
reset.addEventListener("click",function() {
clearInterval(countdown);;
second.textContent="00";
minute.textContent="00";
hour.text.Content="00";
})
Thank you all for your help!

outerHTML destroys the original start button (and creates a new instance), and thus the event listener you attached to it is no longer valid. Fixed code here:
hour=document.getElementById("hour");
minute=document.getElementById("minute");
second=document.getElementById("second");
start=document.getElementById("start")
reset=document.getElementById("reset")
pause=document.getElementById("pause");
var countdown;
start.addEventListener("click", function clicked() {
// alternatively you can clearInterval here every time
if(!countdown)
countdown = setInterval(function() {
if (second.textContent!="59") {
let new_second=Number(second.textContent)+1;
second.textContent=new_second;
}
else {
second.textContent="00";
if (minute.textContent!="59") {
let new_minute=Number(minute.textContent)+1;
minute.textContent=new_minute;
}
else {
minute.textContent="00";
let new_hour=Number(hour.textContent)+1;
hour.textContent=new_hour;
}
}
}, 1000)
}, false);
pause.addEventListener("click", function() {
clearInterval(countdown);
countdown=null;
})
reset.addEventListener("click",function() {
clearInterval(countdown);
countdown=null;
second.textContent="00";
minute.textContent="00";
hour.textContent="00";
})
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
<div id="start">start</div>
<div id="reset">reset</div>
<div id="pause">pause</div>

Countdown and local storage

I don't know very well JavaScript but i must use it in my project.
I need countdown timers which after refresh page don't stop, not cleared and shown all time.
After press button you are redirect to other page, countown start ant button have 'disable value. After countdown time, button automatically must have enable value.
Here is my project: http://licznikii.cba.pl/dopostu/
In my first version everything works well but not after refresh page. Countdowns are cleared.
In my second version I used LocalStorage and it works well to but not much that I won't. After refresh page countowns are hidden. After countdown time button not have automatically enable value but after refreshpage. After refresh page after countdown time everything are showed good.
Please Help

After modifying your second-version it works. I've tested it in all browsers. Sorry for not code-refactoring, but I think you cope with this now :)
<!-- -------------------------------------------------------- SECOND VERSION -->
<script>
$(document).ready(function(){
$('#defaultCountdown3').countdown({until: 0, onTick: highlightLast5});
var teraz = Date.now();
var zapisanyCzas = localStorage.getItem("defaultCountdown3");
if (zapisanyCzas !== null && teraz < +zapisanyCzas) {
var restTime = secDiff(teraz, +zapisanyCzas);
console.log(restTime);
$("#YourButton3").prop('disabled',true);
$('#defaultCountdown3').removeClass('highlight').countdown('option', {until: Math.round(restTime), onExpiry: countdownFinished});
} else {
localStorage.removeItem("defaultCountdown3");
}
function highlightLast5(periods) {
if ($.countdown.periodsToSeconds(periods) === 5) {
$(this).addClass('highlight');
}
}
$('#YourButton3').click(function() {
localStorage.setItem("defaultCountdown3", Date.now() + 60 * 1000);
$('#defaultCountdown3').removeClass('highlight').countdown('option', {until: 60, onExpiry: countdownFinished});
$("#YourButton3").prop('disabled',true)
});
function countdownFinished(){
// Finished - disable your button
localStorage.removeItem("defaultCountdown3");
$("#YourButton3").prop('disabled',false)
}
function secDiff(start, end){
var diff = Math.abs(start-end);
return (diff/1000);
}
});
</script>
<script>
$(document).ready(function(){
$('#defaultCountdown4').countdown({until: 0, onTick: highlightLast5});
var teraz = Date.now();
var zapisanyCzas = localStorage.getItem("defaultCountdown4");
if (zapisanyCzas !== null && teraz < +zapisanyCzas) {
var restTime = secDiff(teraz, +zapisanyCzas);
console.log(restTime);
$("#YourButton4").prop('disabled',true);
$('#defaultCountdown4').removeClass('highlight').countdown('option', {until: Math.round(restTime), onExpiry: countdownFinished});
} else {
localStorage.removeItem("defaultCountdown4");
}
function highlightLast5(periods) {
if ($.countdown.periodsToSeconds(periods) === 5) {
$(this).addClass('highlight');
}
}
$('#YourButton4').click(function() {
localStorage.setItem("defaultCountdown4", Date.now() + 120 * 1000);
$('#defaultCountdown4').removeClass('highlight').countdown('option', {until: 120, onExpiry: countdownFinished});
$("#YourButton4").prop('disabled',true)
});
function countdownFinished(){
// Finished - disable your button
localStorage.removeItem("defaultCountdown4");
$("#YourButton4").prop('disabled',false)
}
function secDiff(start, end){
var diff = Math.abs(start-end);
return (diff/1000);
}
});
</script>

Javascript auto page refresh code

this is the code that comes in head section and it will automatically refresh the whole page in 1 min as i put 6000 in the code below
<script type="text/javascript">
setTimeout('window.location.href=window.location.href;', 6000);
</script>
is there any way for example, when there's 10 seconds left to refresh the page then, a button will display and say "Click here to reset timer" and it will reset that timer to 1 min again?

<script language="javascript">
var timeout,interval
var threshold = 15000;
var secondsleft=threshold;
startschedule();
window.onload = function()
{
startschedule();
}
function startChecking()
{
secondsleft-=1000;
if(secondsleft <= 10000)
{
document.getElementById("clickme").style.display="";
document.getElementById("timercounter").innerHTML = Math.abs((secondsleft/1000))+" secs";
}
}
function startschedule()
{
clearInterval(timeout);
clearInterval(interval);
timeout = setTimeout('window.location.href=window.location.href;', threshold);
secondsleft=threshold;
interval = setInterval(function()
{
startChecking();
},1000)
}
function resetTimer()
{
startschedule();
document.getElementById("clickme").style.display="none";
document.getElementById("timercounter").innerHTML="";
}
</script>
Please wait...<span id="timercounter"></span>
<button id="clickme" style="display:none;" onclick="javascript:resetTimer();">Click here to reset timer</button>

Assuming you have the following html for the button:
<button id="cancel-reload-button" style="display: none" onclick="cancelReload()">Cancel Reload</button>
And this as the script (Note: this gives the idea, but is not neccesarily fully tested):
// Variable for holding the reference to the current timeout
var myTimeout;
// Starts the reload, called when the page is loaded.
function startReload() {
myTimeout = setTimeout(function() {
document.getElementByID("cancel-reload-button").style.display = "inline";
myTimeout = setTimeout(function() {
window.location.reload();
} 10000)
}, 50000);
}
// Cancel the reload and start it over. Called when the button is
// clicked.
function cancelReload() {
clearTimeout(myTimeout)
startReload()
}
// On page load call this function top begin.
startReload();
I created two functions, one for starting the reload and the second one for cancelling it.
Then I assigned the timeout to the variable myTimeout which can be used to later cancel the timeout.
Then I called myTimeout twice - Once for 50 secs, at which point it shows the button and once for 10 secs after which it finally reloads.

How about below? If you click on OK to reset timer, it would keep giving the confirm box every 50 seconds. If you click cancel, it will refresh the page in 10 seconds.
setInterval(function(){ var r = confirm("Reset Timer");
if (r == true) {
setTimeout('window.location.href=window.location.href;', 60000);
} else {
setTimeout('window.location.href=window.location.href;', 10000);
}
}, 50000);
Note: In your question you specified 1 minute, but your code works for 6 seconds(6000 -- > 6 seconds not 60 seconds) I have included for a minute

You can use 2 setTimeout calls, one to make the "Reset" button show up and another one for the refresh timer reset. The trick is to store the second setTimeout on a global variable and use clearTimeout to reset it if the button is pressed.
Here is some JavaScript code to illustrate:
<script type="text/javascript">
var autoRefreshTime = 30 * 1000; // 60000ms = 60secs = 1 min
var warningTime = autoRefreshTime - (10 * 1000); // 10 secs before autoRefreshTime
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
warningTimeout = setTimeout('ShowResetButton();', warningTime);
function ShowResetButton() {
// Code to make the "Reset" button show up
}
// Make this function your button's onClick handler
function ResetAutoRefreshTimer() {
clearTimeout(waitTimeout);
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
}
</script>

The way I would do it is make a function with a timeout, and invoke that function
<script type="text/javascript">
var refreshFunc = function(){
setTimeout(function(){
var r = confirm("Do you want to reset the timer?");
if(r === false){
window.location.href=window.location.href;
}else{
refreshFunc();
}
}, 6000);
};
refreshFunc();
</script>
One big problem with using confirm in this case is you cannot program it to reject. You would have to implement you own modal/dialog box so you can auto reject in 10 seconds.

Try using setInterval():
var time;
$(function() {
time = $('#time');
$('#reset').on('click', reset);
start();
});
var timer, left;
var start = function() {
left = +(time.text()); //parsing
timer = setInterval(function() {
if (0 <= left) {
time.text(left--);
} else {
clearInterval(timer);
location.replace(location);
}
}, 1000);
};
var reset = function() {
if (timer) {
clearInterval(timer);
}
time.text('59');
start();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1><span id='time'>59</span> second(s) left</h1>
<input id='reset' value='Reset' type='button' />

invoke function everytime a boolean becomes false in JavaScript

I'm trying to invoke a function everytime the "paused" property of a html audio element gets false.
I have a timer which shall count the time a audiofile is actually listened to (i also want to exclude the time while searching with the time bar).
I tried it with SetInterval checking all the time for the status of "paused". Unfortunately this isn't working accurately and quite often misses the status change and so lets the time counter count on.
Is there a simple way to invoke a function everytime a boolean changes?
Help would be very appreciated.
Thanks, f.
Thanks for you answer. Unfortunately this didn't do the trick.
Here's the Code:
<html>
<head>
</head>
<body>
<h5 id="test">Audio Timer</h5>
<audio id="player" src="kerry.wav" controls></audio>
<form name="d">
<input type="text" size="8" name="d2">
<h1 id="time"></h1>
</form>
<script>
var audio = document.getElementById("player");
var millisec = 0;
var seconds = 0;
var timer;
function display() {
if (millisec >= 99) {
millisec = 0
seconds += 1
} else
millisec += 1
document.d.d2.value = seconds + "." + millisec;
timer = setTimeout("display()", 10);
}
function starttimer() {
if (timer > 0) {
return;
}
display();
}
function stoptimer() {
clearTimeout(timer);
timer = 0;
}
function startstoptimer() {
if (timer > 0) {
clearTimeout(timer);
timer = 0;
} else {
display();
}
}
function resettimer() {
stoptimer();
millisec = 0;
seconds = 0;
}
setInterval(function () {
var time = audio.paused;
if (time == false) {
startstoptimer();
}
}, 1);
</script>
</body>
</html>
Unfortunately the SetInterval(function().. isn't fast enough to track the audio.paused. which seems is what i need. As you can see this code always does start the timer, but quite often it doesn't stop it when you press pause or when you use the time bar to seek through the audio.
Any idea how to accomplish that?

Create a variable that calls your audio tag
var yourAudio = document.getElementById("audio")
And then
yourAudio.onpause=YourFunction()
If that is not what you are looking for, post your code or part of it, give us more information.

With a while (true) my page didn't even load. But I finally brought it to life by adding two event listeners listening to "playing" and "pause" which invoke the startstoptimer function.
audio.addEventListener("playing", startstoptimer);
audio.addEventListener("pause", startstoptimer);
those two lines were all it needed :)
thanks.

Hide download link for 10 seconds? js

hey, how can I have my download link hidden, and make a count down type thing. Maybe have it count down from 10 and once it's done that have the download link appear, it would be best to do it in js right?
does anyone know how to do this? :D
Thanks

Complete example:
<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 10;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>

You can use setInterval for this. setInterval behaves like a timer, where you can run a certain function periodically. Something like this should do the work(untested):
$(".link").hide();
var iteration = 0;
var timer = setInterval(function() {
if(iteration++ >= 10) {
clearTimeout(timer);
$(".link").show();
$(".counter").hide();
}
$(".counter").text(10 - iteration);
}, 1000);
This will initially hide the download link and run a function every second which counts down from 10. When we reaced ten, we hide the counter and show the link. ClearTimeout is used so that we don't count after we reached ten. Easy as dell.
Edit: As mentioned in the comments, this function is using jQuery to find the elements.

Take a look at the setTimeout function. You can do something like:
function displayLink() {
document.getElementById('link_id').style.display = 'block';
}
setTimeout(displayLink, 10000);

var WAIT_FOR_SECONDS = 10;
var DOWNLOAD_BUTTON_ID = "btnDownload";
if (document.body.addEventListener) {
document.body.addEventListener("load", displayDownloadButton, false);
} else {
document.body.onload = displayDownloadButton;
}
function displayDownloadButton(event) {
setTimeout(function() {
_e(DOWNLOAD_BUTTON_ID).style.display = "";
}, WAIT_FOR_SECONDS*1000);
}
function _e(id) {
return document.getElementById(id);
}