Demo timer start project error but no error?

[danpetroski]

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!

[marcusparsons]

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);

[danpetroski]

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.

[RandellDawson]

@danpetroski

1. Where does the timer class end? Under the event call?

No, the class definition starts with:

class Timer {

and ends after the last:

}

before the comment:

//Created to be able to click the start button

@danpetroski

2. Why did you put the this in the event in an obect? Or {}

this refers to the instance that gets created when creating a new object from the class. It also the new instance to have access to the methods and properties you define after the dot. You can learn more about this by reading some of these articles.

@danpetroski

3. Why did you use a querySelector at the bottom? And finally,
4. Why is there a null included?

document.querySelector('#startButton') is the start button element. The second argument you pass to the class constructor is supposed to be this element. As far as the null, I am not really sure. If you have a pause button, then you would need to change the third argument from null to the actual pause button element.

[marcusparsons]

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!

[danpetroski]

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.

[RandellDawson]

Did you take a look at any of the articles I inked in my last reply regarding the this key word?

[danpetroski]

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.

[danpetroski]

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

[marcusparsons]

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:

gOddboz