CODEWITHSUNDEEP
javascripthtmlstopwatch
Imam Bux
Imam Bux

Reputation: 1166

Stopwatch in JavaScript

Before marking the question duplicate, I want to tell that I have been through all the stopwatch and JavaScript searches but as I am new to the JavaScript, so I can not come to the possible solution myself and I need the help from you guys.

What I want to achieve is to start and stop the watch with the same button. I can stop the watch but can not start again, can't figure out why.

Have a look at the following script and correct me.

var startTimer = setInterval(function(){myTimer()}, 1000);

function myTimer(){
  var current = new Date();
  document.getElementById("timer").innerHTML = current.toLocaleTimeString();
}

function start(st){
  // Problem is in this statement
  // How can I call the global function variable again that's startTimer
  window[st]();
  var elem = document.getElementById("myButton");
  elem.innerHTML = "Stop";
  elem.addEventListener("click", stop);
}

function stop(){
  clearInterval(startTimer);
  var elem = document.getElementById("myButton");
  elem.innerHTML = "Start";
  elem.addEventListener("click", start(startTimer));
}
<p id="timer"></p>
<button id="myButton" onclick="stop(startTimer)">Stop</button>

Upvotes: 7

Views: 7633

Answers (3)

Pooya Gordani
Pooya Gordani

Reputation: 1

How to make a stop watch in JavaScript: ⌚ ⏳

const startBtn = document.querySelector('#start');
const stopBtn = document.querySelector('#stop');
const resetBtn = document.querySelector('#reset');

let sec = document.querySelector('#sec');
let min = document.querySelector('#min');
let hour = document.querySelector('#hour');

secInner = +sec.innerHTML;
minInner = +min.innerHTML;
hourInner = +hour.innerHTML;
// console.log(sec);
// console.log(secInner);
let timer;

const startProcess = function(){
    if(sec.innerHTML < 59){
        if(sec.innerHTML < 9){
            secInner += 1;
            sec.innerHTML = '0' + secInner;
        }
        else{
            secInner += 1;
            sec.innerHTML = secInner;
        }
    }
    else{
        secInner = 0;
        sec.innerHTML = "00";
        // minutes
        if(min.innerHTML < 59){
            if(min.innerHTML < 9){
                minInner += 1;
                min.innerHTML = '0' + minInner;
            }
            else{
                minInner += 1;
                min.innerHTML = minInner;
            }
        }
        else{
            minInner = 0;
            min.innerHTML = "00";

            if(hour.innerHTML < 23){
                if(hour.innerHTML < 9){
                    hourInner += 1;
                    hour.innerHTML = '0' + hourInner;
                }
                else{
                    hourInner += 1;
                    hour.innerHTML = hourInner;
                }
            }
            else{
                clearInterval(timer);

                secInner = 0;
                sec.innerHTML = "00";

                minInner = 0;
                min.innerHTML = "00";

                hourInner = 0;
                hour.innerHTML = "00";
            }
        }
    }



}

startBtn.addEventListener('click', ()=>{
    timer = setInterval(startProcess, 1000);
})

stopBtn.addEventListener('click', ()=>{
    clearInterval(timer);
})

resetBtn.addEventListener('click', ()=>{
    clearInterval(timer);
    secInner = 0;
    minInner = 0;
    hourInner = 0;
    sec.innerHTML = "00";
    min.innerHTML = "00";
    hour.innerHTML = "00";
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stop watch</title>
    <script src="script.js" defer></script>
</head>
<body>
    <span id="hour">00</span>
    <span>:</span>
    <span id="min">00</span>
    <span>:</span>
    <span id="sec">00</span> <br> <br>

    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>
</body>
</html>

Upvotes: 0

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

You want a single method to take care of the start/stop:

  var startTimer = setInterval(myTimer, 1000),
        timerElement = document.getElementById("timer"),
        buttonElement = document.getElementById("myButton");
    
    function myTimer(){
        var current = new Date();
        timerElement.innerHTML = current.toLocaleTimeString();
    }
    
    function toggle(){
        if (startTimer) {
            clearInterval(startTimer);
            startTimer = null;
            buttonElement.innerHTML = "Start";
        } else {
            buttonElement.innerHTML = "Stop";
            startTimer = setInterval(myTimer, 1000);
        }
    }
   <p id="timer"></p>
    <button id="myButton" onclick="toggle()">Stop</button>

Upvotes: 6

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Why clearing your interval? catch-up where the interval left.

var timer  = document.getElementById("timer"),
    paused = 0;

setInterval(function(){
  if(!paused) timer.innerHTML =  new Date().toLocaleTimeString();
}, 1000);

document.getElementById("myButton").addEventListener("click", function(){
  this.innerHTML = (paused ^= 1) ? "Start" : "Stop";
});
<p id="timer"></p>
<button id="myButton">Stop</button>

P.S: Always cache elements you plan to reuse, specially if inside an interval fn.

(paused ^= 1) is used to toggle ones and zeroes 1,0,1,0,1... used than as boolean.

Upvotes: 1

Related Questions