Timer code with the Javascript class and constructor

Question

I have a timer in pure Javascript written with the class and a constructor. There is a problem though, the timer starts before the button "Start" clicked and I can't get why. I need the timer to start only after the button is clicked. Also in my case here, it does not recognize the startTimer function. It would be great if a second pair of eyes point what went wrong. Thank you

HTML

<!DOCTYPE html>
<html>

  <body>
    <container>


      <div class="btn-group">
        <button id="startTimer" onclick="startTimer()">
          Start
        </button>

        <button id="reset" onclick="resetTime()">
          Reset
        </button>
      </div>

      <div id="timer">
        00:00
      </div>

    </container>
  </body>

</html>

JS

class Timer {

 constructor({seconds, minutes, timerSeconds, timerMinutes, interval, counter}) {
    this.seconds = seconds;
    this.minutes = minutes;
    this.timerSeconds = timerSeconds;
    this.timerMinutes = timerMinutes;
    this.interval = interval;
    this.counter = counter;
 }


 runTimer() {


 this.seconds++; 

//condition if seconds reach 60 - turn to 0 and add minutes by one
  if (this.seconds / 60 === 1) {
    this.seconds = 0;
    this.minutes++;


  }

  //add zero to the value for seconds
  if (this.seconds < 10) {
    this.timerSeconds = "0" + this.seconds.toString();
  } else {
    this.timerSeconds = this.seconds;
  }

  //add zero to the value for minutes

  if (this.minutes < 10) {
    this.timerMinutes = "0" + this.minutes.toString();
  } else {
    this.timerMinutes = this.minutes;
  }

document.getElementById("timer").innerHTML = this.timerMinutes + ':' + this.timerSeconds;


}


startTimer() {



  if (this.counter === false) {
   this.interval = window.setInterval(() => this.runTimer(),1000);
    document.getElementById("startTimer").innerHTML = "Stop";
    this.counter = true; 



  } else {
    window.clearInterval(this.interval);
    document.getElementById("startTimer").innerHTML = "Start";
    this.counter = false; 
 }
 } 

/* resetTime() {
  window.clearInterval(this.interval);
  this.seconds = 0;
  this.minutes = 0;
  document.getElementById("timer").innerHTML = "00:00";
  document.getElementById("startTimer").innerHTML = "Start"
 } */  
}

const timer = new Timer( {

    seconds: 0,
    minutes: 0,
    timerSeconds: 0,
    timerMinutes: 0,
    interval:null,
    counter: false,
});

timer.startTimer();

`timer.startTimer();`this line is interpreted at the file load so timer starts immediately on page load — Ahmed Wahba, Jun 14 '20 at 21:24
@ahmedwahba you can see my jsfriddle here. If to remove it , it won't recognize the startTimer function.https://jsfiddle.net/#&togetherjs=HGVQUrc2bK — LidiaWebDev, Jun 14 '20 at 21:34
@LidiaWebDev you are calling `startTimer()` as standalone function not a member in your object as solved in @user120242 — Ahmed Wahba, Jun 15 '20 at 06:37

score 0 · Answer 1 · answered Jun 14 '20 at 22:16

Your onclick is referencing "startTimer()" not "timer.startTimer()".
I've added this: startTimer = () => timer.startTimer();
But it makes more sense to call timer.startTimer() instead of startTimer.

class Timer {

 constructor({seconds, minutes, timerSeconds, timerMinutes, interval, counter}) {
    this.seconds = seconds;
    this.minutes = minutes;
    this.timerSeconds = timerSeconds;
    this.timerMinutes = timerMinutes;
    this.interval = interval;
    this.counter = counter;
 }


 runTimer() {


 this.seconds++; 

//condition if seconds reach 60 - turn to 0 and add minutes by one
  if (this.seconds / 60 === 1) {
    this.seconds = 0;
    this.minutes++;


  }

  //add zero to the value for seconds
  if (this.seconds < 10) {
    this.timerSeconds = "0" + this.seconds.toString();
  } else {
    this.timerSeconds = this.seconds;
  }

  //add zero to the value for minutes

  if (this.minutes < 10) {
    this.timerMinutes = "0" + this.minutes.toString();
  } else {
    this.timerMinutes = this.minutes;
  }

document.getElementById("timer").innerHTML = this.timerMinutes + ':' + this.timerSeconds;


}


startTimer() {



  if (this.counter === false) {
   this.interval = window.setInterval(() => this.runTimer(),1000);
    document.getElementById("startTimer").innerHTML = "Stop";
    this.counter = true; 



  } else {
    window.clearInterval(this.interval);
    document.getElementById("startTimer").innerHTML = "Start";
    this.counter = false; 
 }
 } 

/* resetTime() {
  window.clearInterval(this.interval);
  this.seconds = 0;
  this.minutes = 0;
  document.getElementById("timer").innerHTML = "00:00";
  document.getElementById("startTimer").innerHTML = "Start"
 } */  
}

const timer = new Timer( {

    seconds: 0,
    minutes: 0,
    timerSeconds: 0,
    timerMinutes: 0,
    interval:null,
    counter: false,
});

startTimer = ()=>timer.startTimer();

<!DOCTYPE html>
<html>

  <body>
    <container>


      <div class="btn-group">
        <button id="startTimer" onclick="startTimer()">
          Start
        </button>

        <button id="reset" onclick="resetTime()">
          Reset
        </button>
      </div>

      <div id="timer">
        00:00
      </div>

    </container>
  </body>

</html>

Timer code with the Javascript class and constructor

1 Answers1