Another stopwatch using JS?

The code is creating a responsive page. But every time I press stop and then start again the countdown speeds up. Seconds pass like milliseconds and mins pass like seconds after about 10 or so stops and starts. What might be the issue here? P.S. I haven’t written code for the reset button.

            let ms = 0;
            let secs = 0;
            let mins =0;
            let flag = true;
            var setIntID;
            watchFunction =()=> {
                if(flag){
                  ms +=4 ;
                  document.getElementById('msecs').innerText = `${ms}`;
                  if(ms == 1000){
                     ms =0;
                     secs++
                     document.getElementById('secs').innerText = `${secs}:`
                     if(secs == 60){
                        mins++;
                        document.getElementById('min').innerText = `${mins}:`;
                        secs = 0;
                      }
                }}}
                
            document.getElementById("start").addEventListener('click', function(){
                flag = true;
                var setIntID = setInterval(watchFunction,1);
                console.log(flag) //tracker
                })
    
            document.getElementById("stop").addEventListener('click', function(){
                flag = false;
                console.log(flag); //tracker
                clearInterval(setIntID);
                })

         <div id="mainDiv">
            <div>
                <span id="min">0:</span>
                <span id="secs">0:</span>
                <span id="msecs">0</span>
                <div>
                <button id="start">start</button>
                <button id="stop">stop</button>
                <button id="reset">reset</button>
                </div>
            </div>
        </div>

Answer

You have declared setIntID as a local variable in click for the start button, and therefore it isn’t cleared in the click function for the stopbutton.

            let ms = 0;
            let secs = 0;
            let mins =0;
            let flag = false;
            var setIntID;
            watchFunction =()=> {
                if(flag){
                  ms +=4 ;
                  document.getElementById('msecs').innerText = `${ms}`;
                  if(ms == 1000){
                     ms =0;
                     secs++
                     document.getElementById('secs').innerText = `${secs}:`
                     if(secs == 60){
                        mins++;
                        document.getElementById('min').innerText = `${mins}:`;
                        secs = 0;
                      }
                }}}
                
            document.getElementById("start").addEventListener('click', function(){
                if (flag) return;
                flag = true;
                setIntID = setInterval(watchFunction,1);
                console.log(flag) //tracker
                })
    
            document.getElementById("stop").addEventListener('click', function(){
                flag = false;
                console.log(flag); //tracker
                clearInterval(setIntID);
                })

         <div id="mainDiv">
            <div>
                <span id="min">0:</span>
                <span id="secs">0:</span>
                <span id="msecs">0</span>
                <div>
                <button id="start">start</button>
                <button id="stop">stop</button>
                <button id="reset">reset</button>
                </div>
            </div>
        </div>