How to stop timer count and start with saved time

Question

I'm kinda new to programming, but recently I was trying to do little first project of mine called timer count, it's just simple local website which I open when I'm deciding to start programming during the day and it counts the time. I created 2 buttons with 2 different functions (start,stop), but the problem I'm stuck on is I don't know how to implement stop function. The idea is that timer should stop after button click, and when I click start button it should start from saved time. Here's HTML/CSS code:

   <div class="timer-display-id"> 
    <h1>Timer </h1>
    <p id="timer">00:00:00 </p>
     <button id="start-timer" onclick="start()">Start </button>
      <button id="stop-timer" onclick="stop()">Stop  </button>
  </div>
  <script src="timer.js"></script>

and here's JS code:

function stop() {
     // not exactly sure if this function should be here, anyway no idea what to add to get this to work
    clearInterval(interval);
    start.disabled = false;
  }
function convertSec(cnt) {
   let sec = cnt % 60;
   let min = Math.floor(cnt / 60);
   if (sec < 10) {
      if (min < 10) {return "0" + min + ":0" + sec;}
      else          {return min + ":0" + sec;}
     }
   else if ((min < 10) && (sec >= 10)) {return "0" + min + ":" + sec;}
   else {return min + ":" + sec;}
  }

function start() {
  
   let ret = document.getElementById("timer");
   let counter = 0;
   let start = document.querySelector("#start-timer");
   let stop = document.querySelector("#stop-timer");
   start.disabled = true;
   let interval = setInterval(function() {
     ret.innerHTML = convertSec(counter++); // timer start counting here...

    },1000);
  
}

I understand it might be very messy, kinda lack of logic, but it's best I can do for now. If you'd like to give some tips about code organizing, I'd appreciate it.

Answer 1

You nee to have interval accessible by both functions whileit holds the setInterval function, just move it outside the start function :

 const ret = document.getElementById("timer"); const startBtn = document.querySelector("#start-timer"); let counter = 0; let interval; function stop() { clearInterval(interval); startBtn.disabled = false; } function convertSec(cnt) { let sec = cnt % 60; let min = Math.floor(cnt / 60); if (sec < 10) { if (min < 10) { return "0" + min + ":0" + sec; } else { return min + ":0" + sec; } } else if ((min < 10) && (sec >= 10)) { return "0" + min + ":" + sec; } else { return min + ":" + sec; } } function start() { startBtn.disabled = true; interval = setInterval(function() { ret.innerHTML = convertSec(counter++); // timer start counting here... }, 1000); }

 <div class="timer-display-id"> <h1>Timer </h1> <p id="timer">00:00:00 </p> <button id="start-timer" onclick="start()">Start </button> <button id="stop-timer" onclick="stop()">Stop </button> </div>

Answer 2

If you want the count to be saved after you hit "stop", and to re-start from the same point, you will need to define your count variable somewhere outside the start() function, so that it can tell what count to restart from. At the moment, count is local to the start() function, which will reset it to zero every time.

By using the 1s interval timer to update the count, your counter will round each period to whole seconds. It would be slightly more complicated, but if you want to be able to add up the partial seconds from multiple counts, it would be more accurate to use something like Date.getTime() to record the time the start button is pressed, then check the elapsed time when stop() is triggered, and add that to your count. You might still want to use an interval timer to regularly update the current value though. Again, you would need to check that the variables you want to use have the correct scope, so that they are visible to the functions that use them, and not lost between function calls.