After resetting stopwatch stopwatch is beginning at the previous time-CodePudding

When I want to reset my stopwatch and start it again the timer begins at the stop-point of the previous timer execution but I want that the timer begins at zero. I tried different ways to solve this problem but my tries did not work. What is my failure? The considered area in my JavaScript is marked up.

window.onload = function () {
  //global variables

  let interval = null;
  let timerId = null;
  let y = 3.90;
  let reversal = 20
  const output = document.querySelector('output');
  let maintime = document.getElementById('maintime');
  const start = document.getElementById('actioner');
  const clear = document.getElementById('reseter');
  let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];

  //If start is clicked
  start.addEventListener('click', () => {
    buttonAndTimer();
    startDrive();

  }); // end of func

  function buttonAndTimer() {
    start.innerText = 'Stop';
    if (!interval) {
      interval = setInterval(() => {
        run();
      }, 10);
    } else {
      clearInterval(interval)
      start.innerText = 'Resume';
      interval = null;
    };
  }

    function run() {
      milliseconds  = 10;
      if (milliseconds == 1000) {     //note: 1000 milliseconds are 1 seconds
        milliseconds = 0;
        seconds  ;
      };
      if (seconds == 60) {
        seconds = 0;
        minutes  ;
      };
      if (minutes == 60) {
        minutes == 0
        hours  ;
      };

      h = hours < 10 ? '0'   hours : hours;
      m = minutes < 10 ? '0'   minutes : minutes;
      s = seconds < 10 ? '0'   seconds : seconds;
      ms = milliseconds < 100 ? '00'   milliseconds : milliseconds;

      //Template Literals 
      maintime.innerHTML = `${h} : ${m} : ${s} : ${ms} `
    };

 //calculating price
 function startDrive() {
  if (start.innerText != 'Resume') {
    output.innerHTML = y.toFixed(2)   '€';
    timerId = setInterval(() => {
      if (y < reversal) {
        y  = 0.14375;
      } else if (y > reversal) {
        y  = 0.103125;
      }
      output.innerHTML = y.toFixed(2)   "€";
    }, 5000);
  }
  /*Considered area */
  if (start.innerText == 'Resume') {

    clearInterval(timerId);
  }

} //end of func
   
// considered area
 clear.addEventListener('click', () => {
  clearInterval(interval);
  interval = null;
  maintime.innerHTML = '00:00:00:000';
  start.innerText = 'Start'
  clearInterval(timerId);
  timerId = 0;
  output.innerHTML = "";
})
  } //end of window.load

#box {
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    gap: 5px;
    
  }
  
  span, #maintime{
    color:#74bde0;
    width:15vh;
    text-align: center;
    max-width:20vh; 
  }
  
  .button {
    border:none;
    border-radius: 30px;
    cursor: pointer;
    color:#74bde0;
    box-shadow: 1px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    
    
  }
  
  output {
    border: 1px solid;
  border-color:#74bde0 ;
  border-radius: 5px;
  height: 10vh;
  width: 30vh;
  text-align: center;
  color:#74bde0;
  line-height: 500%;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
  }
  
  #card {
    background-color: #2f2f2f;
    width: 80vh;
    height: 10vh;
    border:1px solid;
    border-color:blueviolet;
    border-radius: 30px;
    
    
  }

<body>
  <div id="box">
      <button class='button' id='actioner'>Start</button>
      <output></output>
      <button class='button' id='reseter'>Reset</button>
      <div id='mainstopwatch'>
          <div id='maintime'>
              <span class='span' id="mainhour">00:</span>
              <span class='span' id="mainminute">00:</span>
              <span class='span' id="mainsecond">00:</span>
              <span class='span' id="milliseconds">000</span>
          </div>
  </div>
</body>

CodePudding user response：

Fixed it.. I hope this is acceptable answer..

window.onload = function () {
  //global variables

  let interval = null;
  let timerId = null;
  let y = 3.90;
  let reversal = 20
  const output = document.querySelector('output');
  let maintime = document.getElementById('maintime');
  const start = document.getElementById('actioner');
  const clear = document.getElementById('reseter');
  let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];

  //If start is clicked
  start.addEventListener('click', () => {
    console.log("start clicked.. ")
    buttonAndTimer();
    startDrive();

  }); // end of func

  function buttonAndTimer() {
    start.innerText = 'Stop';
    if (!interval) {
      interval = setInterval(() => {
        run();
      }, 10);
    } else {
      clearInterval(interval)
      start.innerText = 'Resume';
      interval = null;
    };
  }

  function run() {
    milliseconds  = 10;
    if (milliseconds == 1000) { //note: 1000 milliseconds are 1 seconds
      milliseconds = 0;
      seconds  ;
    };
    if (seconds == 60) {
      seconds = 0;
      minutes  ;
    };
    if (minutes == 60) {
      minutes == 0
      hours  ;
    };

    h = hours < 10 ? '0'   hours : hours;
    m = minutes < 10 ? '0'   minutes : minutes;
    s = seconds < 10 ? '0'   seconds : seconds;
    ms = milliseconds < 100 ? '00'   milliseconds : milliseconds;

    //Template Literals 
    maintime.innerHTML = `${h} : ${m} : ${s} : ${ms} `
  };

  //calculating price
  function startDrive() {
    if (start.innerText != 'Resume') {
      output.innerHTML = y.toFixed(2)   '€';
      timerId = setInterval(() => {
        if (y < reversal) {
          y  = 0.14375;
        } else if (y > reversal) {
          y  = 0.103125;
        }
        output.innerHTML = y.toFixed(2)   "€";
      }, 5000);
    }
    /*Considered area */
    if (start.innerText == 'Resume') {

      clearInterval(timerId);
    }

  } //end of func

  // considered area
  clear.addEventListener('click', () => {
    console.log("clear clicked.. ")
    clearInterval(interval);
    interval = null;
    maintime.innerHTML = '00:00:00:000';
    start.innerText = 'Start'
    clearInterval(timerId);
    timerId = 0;
    output.innerHTML = "";
    milliseconds = 0 
    seconds = 0 
    minutes = 0 
    hours = 0
  })
} //end of