How to make a Play and Pause Button for Stopwatch in JavaScript

December 22, 2021

I’m trying to implement play and pause function in my code. But after pausing once it’s not starting again. I tried to store the update timer function in a object then calling it outside from the class so that I can pause it. How can I improve my implementation?

var playPause = document.querySelector(".playpause");
var x = document.querySelector(".div");
var y = document.querySelector(".div1");
var countdown = document.querySelector(".countdown");
const initialTime = 20;
let time = 0;
let lala = 1;
let gate = false;

const timerClass = {
  updatecountDown: setInterval(function() {
    const min = Math.floor(time / 60);
    let sec = time % 60;
    sec = sec < 10 ? "0" + sec : sec;
    countdown.innerHTML = `${min}:${sec}`;
    let ini = (time * 100) / initialTime;
    let percentage = ini * (1 / 100) * y.offsetWidth;
    x.style.width = percentage + "px";
    if (time == initialTime) clearInterval(updatecountDown);
    time++;
  }, 1000),
};
timerClass.updatecountDown;

playPause.addEventListener("mouseup", function() {
  if (gate == false) {
    clearInterval(timerClass.updatecountDown);
    playPause.innerHTML = `Play`;
    gate = true;
  } else {
    // Want to write something here so that timer start again
    timerClass.updatecountDown;
    playPause.innerHTML = `Pause`;
    gate = false;
  }
});

.div {
  background: orange;
  width: 60px;
  height: 20px;
}

.div1 {
  background-color: gray;
}

.dot {
  background-color: hotpink;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  left: 100px;
  display: inline-block;
}

.countdown {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
}

<body>
  <pc class='countdown'>10.10</pc>
  <div class="div1">
    <div class="div">
      <span class="dot">
      </span>
    </div>
  </div>
  <button class="playpause">Pause</button>
</body>

>Solution :

For this to work you need to pull out the function passed into setInterval. By doing that you can call it directly when you need to restart it. The issue is that once you clear the interval, timerClass.updatecountDown is null and has no concept of the interval function.

var playPause = document.querySelector(".playpause");
var x = document.querySelector(".div");
var y = document.querySelector(".div1");
var countdown = document.querySelector(".countdown");
const initialTime = 20;
let time = 0;
let lala = 1;
let gate = false;

const intervalFn = function() {
  const min = Math.floor(time / 60);
  let sec = time % 60;
  sec = sec < 10 ? "0" + sec : sec;
  countdown.innerHTML = `${min}:${sec}`;
  let ini = (time * 100) / initialTime;
  let percentage = ini * (1 / 100) * y.offsetWidth;
  x.style.width = percentage + "px";
  if (time == initialTime) clearInterval(timerClass.updatecountDown);
  time++;
};

const timerClass = {
  updatecountDown: setInterval(intervalFn, 1000),
};

playPause.addEventListener("mouseup", function() {
  if (gate == false) {
    clearInterval(timerClass.updatecountDown);
    playPause.innerHTML = `Play`;
    gate = true;
  } else {
    // Want to write something here so that timer start again
    timerClass.updatecountDown = setInterval(intervalFn, 1000);
    playPause.innerHTML = `Pause`;
    gate = false;
  }
});

.div {
  background: orange;
  width: 60px;
  height: 20px;
}

.div1 {
  background-color: gray;
}

.dot {
  background-color: hotpink;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  left: 100px;
  display: inline-block;
}

.countdown {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
}

<body>
  <pc class='countdown'>10.10</pc>
  <div class="div1">
    <div class="div">
      <span class="dot">
      </span>
    </div>
  </div>
  <button class="playpause">Pause</button>
</body>