Question 196295 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – my stopwatch immediately adds one second on resume

If I repeatedly click the pause and resume button on my counter, the count immediately goes up by one on every resume button press. How can i change this?

var c = 0;
var t;

function count(){
  document.getElementById("count").innerHTML = c;
  c = c + 1;
  t = setTimeout(count, 1000);
}

function start(){
    count();
    document.getElementById("startb").style.display = "none";
    document.getElementById("pauseb").style.display = "inline";
}

function pause(){
  clearTimeout(t);
  document.getElementById("startb").style.display = "inline";
  document.getElementById("pauseb").style.display = "none";
  document.getElementById("startb").innerHTML = "Resume";
  document.getElementById("resetb").style.display = "inline";
}

function reset(){
  c = 0;
  clearTimeout(t);
  document.getElementById("count").innerHTML = c;
  document.getElementById("startb").style.display = "inline";
  document.getElementById("startb").innerHTML = "Start";
  document.getElementById("pauseb").style.display = "none";
  document.getElementById("resetb").style.display = "none";
}
*{
    margin: 0;
    padding: 0;
    font-family: Arial;
  }
  body{
    background-color: #333;
    color: black;
  }
  button{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #000;
    background-color: #c3c3c3;
    border: 1px solid #000;
  }
  #count{
      font-size: 175px;
  }
  #pauseb {
    display: none;
  }
  #resetb {
    display: none;
  }
<!DOCTYPE html>
<html>
<head>
<title>Stopwatch</title>
<script src="Stopwatch.js"></script>
<link rel="stylesheet" href="Stopwatch.css">
</head>
<body>
<h1>Stopwatch</h1>
<span id="count">0</span><br />
<button id="startb" onClick="start()">Start</button>
<button id="pauseb" onClick="pause()">Pause</button>
<button id="resetb" onClick="reset()">Reset</button>
</body>
</html>

I’m thinking an if else statement in the count function might fix this. I just can’t piece it together. Like if count doesn’t equal 0, then continue with the current count. It’s odd though to me because my resume button IS my start button, and on the very first "start" button-press, it doesn’t immediately add one second. any help is appreciated.

Tags:

2

Answers


  1. 0

    When you call the count() on the resume, it is adding +1 to the count, since you are calling the count function. To counter this, you could add an argument saying to not add to the value. You could also add a custom resume() function.

    function count(dontCount){
  document.getElementById("count").innerHTML = c;
  if (!dontCount) c = c + 1;
  t = setTimeout(count, 1000);
}

function resume(){
    count(true);
    document.getElementById("startb").style.display = "none";
    document.getElementById("pauseb").style.display = "inline";
}

function pause(){
  clearTimeout(t);
  document.getElementById("startb").style.display = "inline";
  document.getElementById("pauseb").style.display = "none";
  document.getElementById("startb").innerHTML = "Resume";
  document.getElementById("startb").setAttribute("onclick", "resume()")
  document.getElementById("resetb").style.display = "inline";
}

    This will allow you to start counting again without increasing the count on the resume() function.

    Login or Signup to reply.
  2. 0

    A little different twist here to use c++ and c-- to increment and decrement the count.

    Other things: – all optional but to demonstrate some things that can make code smaller or easier or more DRY (do not repeat yourself)

    • I also like to use data attributes for "toggle" like actions – which then allows us to change the text of the button from the CSS
    • Use the same toggle show data attribute to show and hide the elements using CSS only.
    • super center the entire thing on the body by using the two lines of CSS for the body for grid display
    • use a function for the display (do one thing in a function)
    • use a function to do the data attribute changes for each
    • use document.querySelector() to target the element passing in the id prefix # but it could be anything here
    • use default font size of 16px on the body because most browsers have that as default
    • use em such as 10em which would be a 160px size to make calculations of size easier in the CSS.
    var c = 0;
var t;

function updateCount(cnt) {
  document.getElementById("count").textContent = cnt;
}

function updateAction(elSelector, action) {
  document.querySelector(elSelector).dataset.show = action;
}

function count() {
  updateCount(c)
  c++;
  t = setTimeout(count, 1000);
}

function start() {
  count();
  updateAction("#startb", "none");
  updateAction("#pauseb", "show");
}

function pause() {
  c--;
  clearTimeout(t);
  updateAction("#startb", "resume");
  updateAction("#pauseb", "none");
  updateAction("#resetb", "show");
}

function reset() {
  c = 0;
  clearTimeout(t);
  updateCount(c);
  updateAction("#startb", "show");
  updateAction("#pauseb", "none");
  updateAction("#resetb", "none");
}
    body,
* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

body {
  background-color: #333;
  color: black;
  font-size: 16px;
  display: grid;
  place-items: center;
}

button {
  width: 6em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  color: #000;
  background-color: #c3c3c3;
  border: 1px solid #000;
}

#count {
  font-size: 11em;
  display: block;
}

#startb[data-show="show"]:after {
  content: 'Start';
  display: inline;
}

#startb[data-show="none"],
#pauseb[data-show="none"],
#resetb[data-show="none"] {
  display: none;
}

#pauseb[data-show="show"],
#resetb[data-show="show"] {
  display: inline;
}

#startb[data-show="resume"]:after {
  content: 'Resume';
  display: inline;
}
    <h1>Stopwatch</h1>
<div id="count">0</div>
<button id="startb" onClick="start()" data-show="show"></button>
<button id="pauseb" onClick="pause()" data-show="none">Pause</button>
<button id="resetb" onClick="reset()" data-show="none">Reset</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search