Demo timer start project error but no error?

This is really confusing. I don’t have any error but I keep running into an issue where (even though I have no error) nothing happens when I click the button. But there is no issue. This is honestly a this issue because I understood the basics, but again, nothing is happening.

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

    this.startButton.addEventListener('click', this.start.bind(this))

  start = () => {
    this.importantMethodCall()
  }
}

importantMethodCall() {
  console.log('The thing was called!')
}
}

Thanks!

Your code just needs to be slightly refactored. Where this is going wrong is in your addEventListener. By default, when you call a function by name, the definition of this is changed to the element that it was called on, instead of on the Timer class.

To by pass this, just pass an arrow function to the addEventListener, which will keep the JS compiler from reassigning this to the button, and then call this.start().

You also need to have start and importantMethodCall inside of the Timer class if they are meant to be tracked along with the Timer class like.

Here’s a CodePen I created

and the refactored code for the JavaScript:

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

    this.startButton.addEventListener('click', () => { this.start() });
  }

  start() {
    this.importantMethodCall();
  }
  
  importantMethodCall() {
    console.log('The thing was called!');
  }
}

//Created to be able to click the start button
const timer = new Timer(30, document.querySelector('#startButton'), null);

First of all, I appreciate not calling my lack of skills out lol. I have a few questions which means I guess I need to go back into the object sections. We’ll see.

  1. Where does the timer class end? Under the event call?
  2. Why did you put the this in the event in an obect? Or {}
  3. Why did you use a querySelector at the bottom? And finally,
  4. Why is there a null included?

This is why I need a mentor lol. Or a bootcamp idk.

I just put a null for no other reason than to satisfy the parameters since nothing was being done with the pauseButton yet in the code. It could have been anything really since there’s only an assignment to it in the constructor.

Thank you, Randell!

1 Like

Then I need to go back and maybe even consider a new career because I’m not understanding why you re factored it like this lol.

Edit: Even though I very much appreciate both what you (Marcus & Randell) have been doing for me. I get some of this but I guess what I’m getting confused about is just how my brain learns. Which is up and down instead of a flowing easy logic topic on topic structure.

I did yes, briefly. They’re good thanks Randell. Honestly, I think personally I’ve worked too hard and long (self taught Udemy since ‘20) on JS that I’m past the point of no return.

I promised myself if I’d passed into objects and DOM manipulation, I’d just keep going. And I have. So it’s probably just the day lol.

1 Like

When I load that code you refactored, it said the start button is null as an error in the Firefox console:

Uncaught TypeError: this.startButton is null

The way I set the code up, you have to have a button with the id of startButton for that query selector to return an element. Here’s that Codepen again showing it action:

1 Like

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