I am making a speed dating timer that counts down from 3 minutes to 0, shows a "move on to next date" message, and then repeats.
I have been able to get the timer to count down to 0, and then restart after the interval I've set, but for some reason it will not display the message. My code is as follows
function countdown(element, minutes, seconds) { // set time for the particular countdown var time = minutes*60 + seconds; var interval = setInterval(function() { var el = document.getElementById(element); // if the time is 0 then end the counter if(time == 0) { el.innerHTML = "Move on to next date..."; clearInterval(interval); setTimeout(function() { countdown('clock', 3, 0); }, 2000); } var minutes = Math.floor( time / 60 ); if (minutes < 10) minutes = "0" + minutes; var seconds = time % 60; if (seconds < 10) seconds = "0" + seconds; var text = minutes + ':' + seconds; el.innerHTML = text; time--; }, 1000); } countdown('clock', 3, 0); 4 Answers
just try this code i have fixed it for you
<html> <head> <Script> function countdown(element, minutes, seconds) { // set time for the particular countdown var time = minutes*60 + seconds; var interval = setInterval(function() { var el = document.getElementById('element'); // if the time is 0 then end the counter if(time == 0) { setTimeout(function() { el.innerHTML = "Move on to next date..."; }, 10); clearInterval(interval); setTimeout(function() { countdown('clock', 0, 5); }, 2000); } var minutes = Math.floor( time / 60 ); if (minutes < 10) minutes = "0" + minutes; var seconds = time % 60; if (seconds < 10) seconds = "0" + seconds; var text = minutes + ':' + seconds; el.innerHTML = text; time--; }, 1000); } countdown('clock', 0, 5); </script> </head> <body> <p>elelelelel</p> </body> </html> You're falling through into the "set the time" part again after the 'set the text' part. It is updating the text, but then overwriting it with "00:00".
You should insert a return statement to stop it continuing, or wrap the clock part in an else block.
function countdown(element, minutes, seconds) { // set time for the particular countdown var time = minutes*60 + seconds; var interval = setInterval(function() { var el = document.getElementById(element); // if the time is 0 then end the counter if (time <= 0) { var text = "hello"; el.innerHTML = text; setTimeout(function() { countdown('clock', 0, 5); }, 2000); clearInterval(interval); return; } var minutes = Math.floor( time / 60 ); if (minutes < 10) minutes = "0" + minutes; var seconds = time % 60; if (seconds < 10) seconds = "0" + seconds; var text = minutes + ':' + seconds; el.innerHTML = text; time--; }, 1000); } countdown('clock', 0, 5); I got this to work by changing
innerHTML to innerText
In my example the clock is just a div. If you are using textbox you need to use to use value.
Here's my complete solution.
<html> <head> <script type="text/javascript"> function countdown(element, minutes, seconds) { // set time for the particular countdown var time = minutes*60 + seconds; var interval = setInterval(function() { var el = document.getElementById(element); // if the time is 0 then end the counter if(time == 0) { el.innerText = "Move on to next date..."; clearInterval(interval); setTimeout(function() { countdown('clock', 3, 0); }, 10); } var minutes = Math.floor( time / 60 ); if (minutes < 10) minutes = "0" + minutes; var seconds = time % 60; if (seconds < 10) seconds = "0" + seconds; var text = minutes + ':' + seconds; el.innerText = text; time--; }, 10); } countdown('clock', 3, 0); </script> </head> <body> <h1>Clock</h1> <div/> </body> </html> I will do it like this instead
$(document).ready(function(){ setInterval(UpdateTime(), 1000); }); var interval = 3*60; // 3 minutes function updateTime(){ interval --; if(interval == 0) { $(element).val("Move on to next date..."); var interval = 3*60; } else { $(element).html(interval + " seconds left"); } } 
