javascript stopwatch user input

Question

does anybody know why my counter keep counting from the beginning since i hit resume button?

var minute;
var second;
var audio;
var interval;
var button = HTMLButtonElement.value = "Resume"

function yok() {
  document.getElementById("btninput").disabled = true
  minute = document.getElementById("minute").value
  second = document.getElementById("second").value

  interval = setInterval(tambah, 1000)

  function tambah() {
    second--
    if (minute != 0 && second == -1) {
      minute--
      second = 59
    } else if (minute == 0 && second == 0) {
      clearInterval(interval)
      document.getElementById("hasill").innerHTML = "Finish!!!"
      document.getElementById("btninput").disabled = false
    }
    document.getElementById("hasil").innerHTML = minute + " : " + second
  }
}



function stop() {
  document.getElementById("btninput").disabled = false
  clearInterval(interval)

  document.getElementById("btninput").innerHTML = button;
}

<p data-component="head">TIMER</p>
<input type="number" id="minute" placeholder="minute" style="width: 65px;" data-component="minute">
<input type="number" id="second" placeholder="seconds" style="width: 69px;" max="60" data-component="second">
<p id="hasil" data-component="hasil">00</p>
<p id="hasill" data-component="hasill"></p>
<audio src="ding-sound-effect_2.mp3" id="sound" data-component="sound"></audio>
<button onclick="yok()" data-component="button" id="btninput">start</button>
<button onclick="stop()" id="stop">stop</button>

Answer 1

When you press resume, yok() is invoked. Which resets the minute and second on

minute = document.getElementById("minute").value
second = document.getElementById("second").value

You could add a condition to handle case for resume.

  if (document.getElementById("btninput").innerHTML !== button){
    minute = document.getElementById("minute").value;
    second = document.getElementById("second").value;
  }

---

EDIT: So to explain more clearly, you should keep in mind that the resume button still has onclick event set to yok() (since you only changed the innerHTML from start to resume). So what happens if you press resume? Well, yok() function will be executed, and runs the line

minute = document.getElementById("minute").value
second = document.getElementById("second").value

which sets the value of minute and second to whatever is in the input field (basically resets the timer).

So what has to be done, is to check if the button is set to the start button state, or the resume button state. So just like how I did above, the simplest way (although not the cleanest) you can check if the innerHTML on the button says 'resume' or not.

---

Also, as ImranRafiqRather mentioned, it might be a better idea to set a default value of minute and second.

I suggest doing something like

  minute = document.getElementById("minute").value || 0;
  second = document.getElementById("second").value || 0;

which ensures that if the elements' value were falsy, the code will still set the variables to 0 (you might want to read about falsy values and || (or) syntax, it might look weird but yes, javascript is a weird language :P).

Answer 2

There are many issues, that I have seen so far.

1. The initial values for minutes and seconds is not set initially in your code which creates bugs into your code.
2. I don't find any use of minute and second input fields when they are no longer used in your code. (I have perhaps used those input fields and added my hour field as well)

I have made some changes and provided a better Timer logic as per conversions between hours and minutes and seconds. Go through the code provided and see if it works fine for you. I have removed unwanted code (You can use the same logic in any manner you like).

You basic Timer is ready though :)

let second = 0;
let minute = 0;
let hour = 0;
var interval;
var button = (HTMLButtonElement.value = "Resume");

function yok() {
  document.getElementById("btninput").disabled = true;

  interval = setInterval(tambah, 1000);
}

function tambah() {
  // if (minute != 0 && second == -1) {
  //   minute--;
  //   second = 59;
  // } else if (minute == 0 && second == 0) {
  //   clearInterval(interval);
  //   document.getElementById("hasill").innerHTML = "Finish!!!";
  //   document.getElementById("btninput").disabled = false;
  // }
  // document.getElementById("hasil").innerHTML = minute + " : " + second;
  second++;
  document.getElementById("second").value = second;
  if (second === 60) {
    minute = minute + 1;
    document.getElementById("minute").value = minute;
    second = 0;

    if (minute === 60) {
      hour = hour + 1;
      document.getElementById("hour").value = minute;
      minute = 0;
    }

    // You can take it forward from here onnwards
  }
}

function stop() {
  document.getElementById("btninput").disabled = false;
  clearInterval(interval);

  document.getElementById("btninput").innerHTML = button;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Timer in Javascript</title>
  </head>
  <body>
    <p data-component="head">TIMER</p>

    <input
      type="number"
      id="hour"
      placeholder="hour"
      style="width: 65px;"
      data-component="hour"
    />
    <span>h</span>

    <input
      type="number"
      id="minute"
      placeholder="minute"
      style="width: 65px;"
      data-component="minute"
    />
    <span>m</span>
    <input
      type="number"
      id="second"
      placeholder="seconds"
      style="width: 69px;"
      max="60"
      data-component="second"
    />
    <span>s</span>
    <!-- <p id="hasil" data-component="hasil">00</p> -->
    <br />
    <br />
    <button onclick="yok()" data-component="button" id="btninput">start</button>
    <button onclick="stop()" id="stop">stop</button>

    <script src="script.js"></script>
  </body>
</html>