Javascript stopwatch

JavaScript
1

Hello Guys!!I wanted to make a simple stopwatch using javascript but i got some issues and i can’t understand what is wrong.The problem is that when i press the buttons nothing is happening

<!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>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
   <link rel="stylesheet" href="style.css">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
</head>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
<body>
   <div class="wrapper">
<h1>Stopwatch</h1>
<h2>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>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
   <script>
   window.load = function() {
   let seconds = 00;
   let tens = 00;
   let attachTens = document.getElementById('tens');
   let attachSeconds = document.getElementById('seconds');
   let buttonStart = document.getElementById('button-start');
   let buttonStop = document.getElementById('button-stop');
   let buttonReset = document.getElementById('button-reset');
   let Interval;

   buttonStart.onclick = function() {
      clearInterval(Interval);
      Interval = setInterval('StartTimer', 10);
   }

   buttonStop.onclick = function() {
      clearInterval(Interval);
   }

   buttonReset.onclick = function() {
    clearInterval(Interval);
    tens = 00;
    seconds = 00;
    attachTens.innerHTML = tens;
    attachSeconds.innerHTML = seconds;
   }

   function StartTimer() {
      tens++

      if(tens <= 9) {
         attachTens.innerHTML = "0"+ tens;
      }

      if(tens > 9) {
         attachTens.innerHTML = tens;
      }

      if(tens > 99) {
         seconds++;
         console.log(seconds);
         attachTens.innerHTML = 00;
         tens = 0;
         attachSeconds.innerHTML = "0"+ seconds;
      }

      if(seconds > 9) {
         attachSeconds.innerHTML = seconds;
      }
   }
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
   </script>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
</body>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
</html>
2

You have a couple issues:

It should be window.onload = function() {

setInterval expects an actual function and not a string as the first argument.

3

Thanks man it worked

4

You have quite a bit of extra logic that is not needed in your StartTimer function.

See below if you want to see how it can be optimized a bit more.

  function StartTimer() {
    tens++;
    if (tens > 99) {
      seconds++;
      tens = 0;
    }
    attachTens.innerHTML = ("" + tens).padStart(2, "0");
    attachSeconds.innerHTML = ("" + seconds).padStart(2, "0");
  }
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.