Not getting JS Functionality-CodePudding

In this Hourly Stop Watch Dynamic Web Application, I want to achieve the given functionality using JS. below is the functionality

The timer should be initiated at 0.

When the HTML button element with the id startBtn is clicked, the timer should be started.
When the HTML button element with the id stopBtn is clicked, the timer should be stopped.
When the HTML button element with the id startBtn is clicked after the HTML button element with id stopBtn clicked, the timer should be resumed.
Timer should reset to 00 minutes, 00 seconds after one hour.

Note:- This is a one hour timer. The maximum time is one hour.

This is the output image:

Hourly Stop Watch Image

Below is the code that I tried:

let minutesEl = document.getElementById("minutes");
let secondsEl = document.getElementById("seconds");
let startBtnEl = document.getElementById("startBtn");
let stopBtnEl = document.getElementById("stopBtn");

startBtnEl.onclick = function() {
    let counter = 0;
    let intervalId = setInterval(function(){
        counter = counter   1;
        secondsEl.textContent = counter;
    }, 1000);
};

stopBtnEl.onclick = function() {
    clearInterval(intervalId);
};

@import url("https://fonts.googleapis.com/css2?family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&family=Playfair Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.timer {
  font-size:36px  
}
 
.button {
  color:#ffffff;
  border-radius: 4px;
  padding:5px 15px;
  border:none;
}

.bg-start-button {
  background-color: #5cb85c;
}

.bg-stop-button {
  background-color: #d9534f;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="text-center">
    <p class="timer">
      <span id="minutes">00</span>:<span id="seconds">00</span>
     </p>
    <button class="bg-start-button button" id="startBtn">
      Start
    </button>
    <button class="bg-stop-button button" id="stopBtn">
      Stop
    </button>
    </div>
  </body>
</html>

CodePudding user response：

You define your intervalID in the scope of the function, so your stop function does not have access to it.

Define it outside.

let minutesEl = document.getElementById("minutes");
let secondsEl = document.getElementById("seconds");
let startBtnEl = document.getElementById("startBtn");
let stopBtnEl = document.getElementById("stopBtn");
let intervalId;

startBtnEl.onclick = function() {
    let counter = 0;
    intervalId = setInterval(function(){
      counter = counter   1;
      secondsEl.textContent = counter;
    }, 1000);
};

stopBtnEl.onclick = function() {
    clearInterval(intervalId);
};

@import url("https://fonts.googleapis.com/css2?family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&family=Playfair Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.timer {
  font-size:36px  
}
 
.button {
  color:#ffffff;
  border-radius: 4px;
  padding:5px 15px;
  border:none;
}

.bg-start-button {
  background-color: #5cb85c;
}

.bg-stop-button {
  background-color: #d9534f;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="text-center">
    <p class="timer">
      <span id="minutes">00</span>:<span id="seconds">00</span>
     </p>
    <button class="bg-start-button button" id="startBtn">
      Start
    </button>
    <button class="bg-stop-button button" id="stopBtn">
      Stop
    </button>
    </div>
  </body>
</html>