I don't know how to make this show within the html. what is wrong with this script?
Question
I wrote the following js. I want it to count down inside the div-element. Please help. I've exhausted everything I could think of. Is this a problem in the HTML or am I just not passing things correctly in my js code?
<html> <head> <title>Counter</title> <script> var el, usr_t, split_list, mins, secs; function getValues() { el = document.getElementById("timer"); usr_t = document.getElementById("time").value; split_list = usr_t.split(":").map(Number); mins = split_list[0]; secs = split_list[1]; while (mins >= 0) { for (var i = secs; i > 0; i--) { setDelay(i); } secs = 59; mins--; } } function setDelay(i) { setTimeout(function() { el.innerHTML = (mins + ":" + secs); }, 1000); } </script> </head> <body> <form> Enter your time: (mm:ss) <br> <input type="text" id="time"> <br> <input type="submit" value="Start" onclick="getValues()"> </form> <div id="timer"></div> </body> </html>
5 answers
solution1
1 2016-10-19 09:18:16
you should not use type="submit" rather use type="button" if you have to use input. Also a better approach for implementing the count down timer in my opinion would be to use setInterval rather than a while loop with delay. You can perform your checks within setInterval.
solution2
0 2016-10-19 09:12:04
The reason is you are using a form. Whenever you press that button (actually a form submit button), the page will be refreshed.
Try changing your html body to this:
<body>
Enter your time: (mm:ss)<br>
<input type="text" id="time"><br>
<button onclick="getValues()">Start</button>
<div id = "timer"></div>
</body>
solution3
0 2016-10-19 09:38:58
Please find the working example code below, clear the interval when you need.
Html:
<body>
Enter your time: (mm:ss)<br>
<input type="text" id="time"><br>
<input type="submit" value="Start" onclick="timer();">
<div id = "timer"></div>
</body>
JS:
var el, usr_t, split_list, mins, secs;
el = document.getElementById("timer");
function calc(){
secs = secs-1;
if(secs == 0){
mins = mins-1;
el.innerHTML = (mins + ":" + secs);
secs = 59;
}
el.innerHTML = (mins + ":" + secs);
}
function timer(){
el = document.getElementById("timer");
usr_t = document.getElementById("time").value;
split_list = usr_t.split(":").map(Number);
mins = split_list[0];
secs = split_list[1];
setInterval(calc, 1000);
}
solution4
0 2016-10-19 11:54:00
It a nice idea your JavaScript method.
<form method="post" onsubmit="event.preventDefault();getValues();">
You can still use input with type of submit but instead call the function on the form tag and prevent the default form action. Also your JavaScript has some bugs it won't actually continue count down like a timer. Using some of your code this is what I did:
var el, usr_t, split_list, mins, secs, myTimer;
function getValues() {
// clear timer (incase user clicks button again)
clearInterval(myTimer);
// get variables
el = document.getElementById("timer");
usr_t = document.getElementById("time").value;
split_list = usr_t.split(":").map(Number);
mins = split_list[0];
secs = split_list[1];
// validate correct minute or second
if (mins === undefined || secs === undefined || mins > 60 || mins < 0 || secs > 60 || secs < 0) {
el.innerHTML = "Please enter valid time.";
} else {
myTimer = setInterval(function() {
// update timer
el.innerHTML = (mins + ":" + secs);
// if minutes hit zero end timer
if (mins == 0) {
clearInterval(myTimer);
}
// if seconds hit zero reset and reduce a minute
if (secs == 0) {
mins--;
secs = 59;
}
secs--;
}, 1000);
}
};
Also if interest read this stackoverflow on setTimeout vs setInterval .
solution5
0 ACCPTED 2016-10-20 19:02:03
The following is more or less the same code I showed you in your other question Update timer inside div. JavaScript which built my answer to your other question How to repeatedly update the contents of a <div> by only using JavaScript? .
You are still using setTimeout() in a loop. That while loop is calling setDelay() over and over again which creates a bunch of timeouts that will all call their given callback at the same time which is to set your output div to the time left (which will be 0 since the decrementer loop is finished).
var el = document.getElementById("timer"), minsInput = document.getElementById("mins"), secsInput = document.getElementById("secs"), timerForm = document.getElementById("timer-form"); function countAway() { var mins = minsInput.value, secs = secsInput.value; (function countDown() { if (secs || mins) { setTimeout(countDown, 100); // Should be 1000, but I'm impatient } el.innerHTML = mins + ":" + (secs.toString().length < 2 ? "0" + secs : secs); // Pad number secs -= 1; if (secs < 0) { mins -= 1; secs = 59; } }()); } timerForm.addEventListener("submit", function(submitEvent) { countAway(); submitEvent.preventDefault(); });
<form id="timer-form" action="#" method="post"> <fieldset> <legend>Timer</legend> <ul> <li> <label for="mins">Minutes</label> <input id="mins" type="number" value="1" min="0" max="60"> </li> <li> <label for="secs">Seconds</label> <input id="secs" type="number" value="30" min="0" max="60"> </li> <li> <button type="submit">Start</button> </ul> </fieldset> </form> <div id="timer"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.