How to toggle a button with Javascript

Question

I want to create a phone-like stopwatch using HTML, CSS, and vanilla JavaScript. The one I have already done does the task, but I don't want a separate button for stopping and starting. How could I make a button that changes from start to stop and stop to start?

Here is my HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <h1>Stopwatch</h1>
    <h2>Vanilla JavaScript Stopwatch</h2>
    <p><span id="seconds">00</span>:<span id="tens">00</span></p>
    <button id="button-start">Start</button>
    <button id="button-stop">Stop</button>
    <button id="button-reset">Reset</button>
  </div>
</body>
</html>

Here is my JavaScript code:

window.onload = function () {
  
  var seconds = 00; 
  var tens = 00; 
  var appendTens = document.getElementById("tens")
  var appendSeconds = document.getElementById("seconds")
  var buttonStart = document.getElementById('button-start');
  var buttonStop = document.getElementById('button-stop');
  var buttonReset = document.getElementById('button-reset');
  var Interval ;

  buttonStart.onclick = function() {
    
    clearInterval(Interval);
     Interval = setInterval(startTimer, 10);
  }
  
    buttonStop.onclick = function() {
       clearInterval(Interval);
  }
  

  buttonReset.onclick = function() {
     clearInterval(Interval);
    tens = "00";
    seconds = "00";
    appendTens.innerHTML = tens;
    appendSeconds.innerHTML = seconds;
  }
  
   
  
  function startTimer () {
    tens++; 
    
    if(tens <= 9){
      appendTens.innerHTML = "0" + tens;
    }
    
    if (tens > 9){
      appendTens.innerHTML = tens;
      
    } 
    
    if (tens > 99) {
      console.log("seconds");
      seconds++;
      appendSeconds.innerHTML = "0" + seconds;
      tens = 0;
      appendTens.innerHTML = "0" + 0;
    }
    
    if (seconds > 9){
      appendSeconds.innerHTML = seconds;
    }
  
  }
  

}

You can store a boolean that will tell you if the stopwatch is started or not, let's call it isStarted (false by default). If the boolean is false and the button is clicked change button's text to "stop", change the boolean to true and start the stopwatch. Vice-versa if the boolean is true. — Warm Red
– Warm Red, Commented Nov 17, 2022 at 14:08

becauseimbored · Accepted Answer · 2022-11-17 14:10:57Z

2

Define a boolean to track if the clock is running or not and combine the start and stop function into one: something like this:

var clockStarted = false;

buttonStart.onclick = function() {
  clearInterval(Interval);
  if (!clockStarted) {
     Interval = setInterval(startTimer, 10);
     clockStarted = true;
  } else {
     clockStarted = false;
  }
}


buttonReset.onclick = function() {
  clearInterval(Interval);
  tens = "00";
  seconds = "00";
  appendTens.innerHTML = tens;
  appendSeconds.innerHTML = seconds;
  clockStarted = false;
}

answered Nov 17, 2022 at 14:10

becauseimbored

812 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JaRoMaster · Accepted Answer · 2022-11-17 14:10:48Z

0

You could make your play-button invisible after clicking on it (buttonStart.style.dispaly = "none") and enable your stop-button (buttonStop.style.dispaly = "block") and do the same in reverse in your stop function.

Another possible way would be to use only one button and save the state of your player in a variable (i.e. a boolen isPlaying). Then you'd only need one onPress method which starts or stops the player according to isPlaying. Youd also need to change the element or the icon on you button accoring to this variable.

answered Nov 17, 2022 at 14:10

JaRoMaster

1811 gold badge4 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to toggle a button with Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related