How to toggle a button with Javascript-CodePudding

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 >
    <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;
    }
  
  }
  

}

CodePudding user response：

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;
}

CodePudding user response：

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.