How to do different thing each time I click a single butting using Vanilla JavaScript?-CodePudding

I want to create a phone-like stopwatch using HTML, CSS, and Vanilla JavaScript. The one I already have do the same task but I don't want a seprate button to stop the stopwatch. I want to start the stopwatch with the start buttun and right after I started the stopwatch the (start button) should turn to (stop button) clicking which the stopwatch stops.

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：

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.

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