I have a problem with my stop watch in JavaScript
Question
I am making a stopwatch in JavaScript but I am having some issues with my code. It works fine, but one part is messed up. When the milliseconds is less than 100, and I hit stop and then start again the milliseconds go back to 0 and continue counting. I'll attach a video here: https://drive.google.com/file/d/1CKezv6hYjRfunOC4GdkBJr5n0MsXybEB/view Here is my code:
function init(){ var myInterval; var minutes; var seconds; var hundredths; document.getElementById('btnStart').addEventListener("click", function(){ if(document.getElementById("minutes").innerHTML !== "00"){ minutes = parseInt(document.getElementById("minutes").innerHTML); } if(document.getElementById("hundredths").innerHTML !== "00"){ hundredths = parseInt(document.getElementById("hundredths").innerHTML); } if(document.getElementById("seconds").innerHTML !== "00"){ seconds = parseInt(document.getElementById("seconds").innerHTML); } else{ hundredths = 0; minutes = 0; seconds = 0; } myInterval = setInterval(function() { hundredths++; if(hundredths >= 10){ document.getElementById("hundredths").innerHTML = hundredths; } if(hundredths <= 9){ document.getElementById("hundredths").innerHTML = "0" + hundredths; } if(hundredths > 99){ hundredths = 0; seconds++; if(seconds > 59){ seconds = 0; hundredths = 0; minutes++; if(minutes < 10){ document.getElementById("minutes").innerHTML = "0" + minutes; } if(minutes >= 10){ document.getElementById("minutes").innerHTML = minutes; } } if(seconds < 10){ document.getElementById("seconds").innerHTML = "0" + seconds; } if(seconds >= 10){ document.getElementById("seconds").innerHTML = seconds; } } }, 10); }); document.getElementById('btnStop').addEventListener("click", function(){ clearInterval(myInterval); minutes = parseInt(document.getElementById("minutes").innerHTML); seconds = parseInt(document.getElementById("seconds").innerHTML); hundredths = parseInt(document.getElementById("hundredths").innerHTML); }); document.getElementById('btnReset').addEventListener("click", function(){ clearInterval(myInterval); document.getElementById("minutes").innerHTML = "00"; document.getElementById("seconds").innerHTML = "00"; document.getElementById("hundredths").innerHTML = "00"; }); }
<html> <head> <title>JS StopWatch</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #container{ background-color: lightgreen; display:flex; flex-direction: column; align-items: center; margin-left: auto; margin-right: auto; width:35%; } #buttonContainer{ display: flex; flex-direction: row; justify-content: center; column-gap: 20px; margin-top: 20px; margin-bottom: 40px; } input{ width:50%; border-radius: 10px; font-size: 2em; } span{ font-size:2em; } </style> </head> <body onload = "init()"> <div id="container"> <div><h1>STOPWATCH</h1></div> <div><h1>MY JAVASCRIPT STOPWATCH</h1></div> <div id="timeDisplay"> <SPAN id="minutes">00</SPAN>:<SPAN id="seconds">00</SPAN>:<SPAN id="hundredths">00</SPAN> </div> <div id="buttonContainer"> <input type="button" id="btnStart" value="Start"> <input type="button" id="btnStop" value="Stop"> <input type="button" id="btnReset" value="Reset"> </div> </div> </body> </html>
2 answers
solution1
2 ACCPTED 2022-05-18 15:17:39
You messed up here, You checking for seconds == 0 and updates hundredths = 0 . SO everytime you stop before reach 1 second , The millisecond will be updated to 0.
if(document.getElementById("seconds").innerHTML !== "00"){
seconds = parseInt(document.getElementById("seconds").innerHTML);
}else{
hundredths = 0;
minutes = 0;
seconds = 0;
}
NOTE: Your code can be minimized, But I didn't. Do it your self
Updated Code
function init(){ var myInterval; var minutes; var seconds; var hundredths; document.getElementById('btnStart').addEventListener("click", function(){ if(document.getElementById("minutes").innerHTML !== "00"){ minutes = parseInt(document.getElementById("minutes").innerHTML); } else { minutes = 0; } if(document.getElementById("hundredths").innerHTML !== "00"){ hundredths = parseInt(document.getElementById("hundredths").innerHTML); } else { hundredths = 0; } if(document.getElementById("seconds").innerHTML !== "00"){ seconds = parseInt(document.getElementById("seconds").innerHTML); } else { seconds = 0; } myInterval = setInterval(function() { hundredths++; if(hundredths >= 10){ document.getElementById("hundredths").innerHTML = hundredths; } if(hundredths <= 9){ document.getElementById("hundredths").innerHTML = "0" + hundredths; } if(hundredths > 99){ hundredths = 0; seconds++; if(seconds > 59){ seconds = 0; hundredths = 0; minutes++; if(minutes < 10){ document.getElementById("minutes").innerHTML = "0" + minutes; } if(minutes >= 10){ document.getElementById("minutes").innerHTML = minutes; } } if(seconds < 10){ document.getElementById("seconds").innerHTML = "0" + seconds; } if(seconds >= 10){ document.getElementById("seconds").innerHTML = seconds; } } }, 10); }); document.getElementById('btnStop').addEventListener("click", function(){ clearInterval(myInterval); minutes = parseInt(document.getElementById("minutes").innerHTML); seconds = parseInt(document.getElementById("seconds").innerHTML); hundredths = parseInt(document.getElementById("hundredths").innerHTML); }); document.getElementById('btnReset').addEventListener("click", function(){ clearInterval(myInterval); document.getElementById("minutes").innerHTML = "00"; document.getElementById("seconds").innerHTML = "00"; document.getElementById("hundredths").innerHTML = "00"; }); }
<html> <head> <title>JS StopWatch</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #container{ background-color: lightgreen; display:flex; flex-direction: column; align-items: center; margin-left: auto; margin-right: auto; width:35%; } #buttonContainer{ display: flex; flex-direction: row; justify-content: center; column-gap: 20px; margin-top: 20px; margin-bottom: 40px; } input{ width:50%; border-radius: 10px; font-size: 2em; } span{ font-size:2em; } </style> </head> <body onload = "init()"> <div id="container"> <div><h1>STOPWATCH</h1></div> <div><h1>MY JAVASCRIPT STOPWATCH</h1></div> <div id="timeDisplay"> <SPAN id="minutes">00</SPAN>:<SPAN id="seconds">00</SPAN>:<SPAN id="hundredths">00</SPAN> </div> <div id="buttonContainer"> <input type="button" id="btnStart" value="Start"> <input type="button" id="btnStop" value="Stop"> <input type="button" id="btnReset" value="Reset"> </div> </div> </body> </html>
solution2
0 2022-05-18 15:16:41
When calling stop by clearInterval, the last value of you seconds timer is kept, try to reinitialize it to zero before starting a new timer session
stopTimer(){
clearInterval(myInterval)
minutes = 0;
secons = 0;
hours = 0
}
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.
Related Question
Creating a Stop Watch in Javascript
i have problem in my code javascript function onchange()
I have a problem with my JavaScript code and how HTML displays it
I have a problem with a function in javascript
I have a problem with if statement in javaScript
I think I have a CSS/JavaScript problem?
i have a problem in switch case *javascript
I have a problem with JavaScript onClick function
Whey I have a problem to identify a class on javascript
I have a problem with slash in javaScript n Ajax
Related Tags