Timer project storage & value issue

1

Hello. I’m starting to store (and manipulate) the data in my timer project. When I put a # value in on my HTML base page to be started in theplaceholder area, this is what I get:

My HTML:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input id="duration" value="25" />
    <button id="start">Start</button>
    <button id="pause">Pause</button>
    <script src="timer5.js"></script>
  </body>
</html>

And my JS:

class Timer {
  constructor(durationInput, startButton, pauseButton) {
    this.durationInput = durationInput;
    this.startButton = startButton;
    this.pauseButton = pauseButton;

    this.startButton.addEventListener('click', this.start);
    this.pauseButton.addEventListener('click', this.pause);
  }

  start = () => {
    this.tick();
    this.interval = setInterval (this.tick, 1000);
  };

  pause = () => {
    clearInterval(this.interval)
  }

  tick = () => {
    const timeRemaining = parseFloat(this.durationInput.value)
    this.durationInput.value = timeRemaining - 1
  };
}

const durationInput = document.querySelector('#duration');
const startButton = document.querySelector('#start');
const pauseButton = document.querySelector('#pause');

const timer = new Timer(durationInput, startButton, pauseButton);

My result:

Screenshot 2023-03-25 13.07.03
Screenshot 2023-03-25 13.07.031024×768 33.2 KB

I think I did everything to work properly and start ticking down w/ the placeholder #, but I could be wrong. Thanks

2

Well, I loaded that code into CodePen and it seems to work there. It doesn’t require any linking, so could be a problem with how you linked your files or serving your page.

Whats the 404 error from and what are you using to serve the page on port 5500?

3

I got it working lol. I just restarted VSC and the page. Don’t know what that was about. Thanks

4

Update lol.

  constructor(durationInput, startButton, pauseButton) {
    this.durationInput = durationInput;
    this.startButton = startButton;
    this.pauseButton = pauseButton;

    this.startButton.addEventListener('click', this.start);
    this.pauseButton.addEventListener('click', this.pause);
  }

  start = () => {
    this.tick();
    this.interval = setInterval (this.tick, 1000);
  };

  pause = () => {
    clearInterval(this.interval)
  }

  tick = () => {
    this.timeRemaining = timeRemaining - 1
  };
  
  get timeRemaining() {
    return parseFloat(this.durationInput.value)
  } 

  set timeRemaining(time) {
    this.durationInput.value = time
  }
}

const durationInput = document.querySelector('#duration');
const startButton = document.querySelector('#start');
const pauseButton = document.querySelector('#pause');

const timer = new Timer(durationInput, startButton, pauseButton);

This is giving me an error of :

Uncaught ReferenceError: timeRemaining is not defined.
5

Do you need a this on the second time remaining as well?

  tick = () => {
    this.timeRemaining = timeRemaining - 1
  };
1 Like
6

Hello there,

Where have you defined timeRemaining?

Also, it might cause you problems defining getters and setters with the same name as properties. That is, this.timeRemaining refers to a method of your class.

Hope this helps

1 Like
7

Idk that’s why I’m asking lol.

8

Well, I was confused about timeRemaining as well until it worked on the page. So I didn’t question it beyond that. Maybe I’m too trusting of Udemy pros lol

10

Lol… well, the question was more of a suggestion because I knew you needed a this as you didn’t declare a local variable time remaining, but at the same time I wasn’t sure regarding your use of getters and setters, so was just suggesting to try it.

I initially replied that using getters and setters with the same name might be a problem, but reading up, I guess its OK. I’ve never used them myself.

But I did add a this to timeRemaining in your tick() function, and it seemed to work for me.

tick = () => {
    this.timeRemaining = this.timeRemaining - 1
  };
1 Like
11

I appreciate the clarity. To be honest, maybe its just the getter and setter section but I need to go back and take a look at some stuff because I’m getting confused about not only getters and setters but the this keyword. These are ADHD/learning issues. Concepts are not fun when you’re not able to grasp text going in the right or wrong places based on JS rules. lol

12

Understandable. There’s definitely still times when I’m not exactly where what this is referring to, but in this case, inside a class, this refers to the class itself, basically you use it to specify that you’re wanting to access part of the class that you’re currently in.

Maybe its easier to understand it from outside. So if you use your timer class to create a timer:

const myTimer = new Timer(durationInput, startButton, pauseButton);

Now the variable myTimer is a timer object. How would you then get the value of that timer. It would look like this:

let timerValue = myTimer.timeRemaining;

So you use myTimer to refer to the object, then .timeRemaining to refer to your getter method. But if you’re working inside the timer itself, how does the timer refer to itself. That is where this comes into play.

let myTimer = this.timeRemaining

That says set a variable called myTimer to the value you get from the timeRemaining getter within this which is the class you’re inside.

Hard to word this in a way that isn’t in itself confusion… pictures would help, lol. But I hope that clarifies a little.

1 Like
13

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