I have a problem with my stop watch in JavaScript-CodePudding

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 onl oad = "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>

CodePudding user response：

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 onl oad = "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>

CodePudding user response：

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
}