Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

addEventListener doesn't work for some reason while onclick works [Awesome Quiz Project]

Ok so I was creating the "Awesome Quiz" project from the "Front End Developer Track" and I tried it with my best from scratch.

I am used to addEventListeners as my main event handling function, however, in the code below; the quiz app go through the questions but do not update the score even if the answer was right. I kept debugging and console logging for almost 2 hours till I found out that the "very odd" problem was simply that I add addEventListener handler to the buttons where the user click on to select an answer instead of an onclick function.. I want to know what is actually the problem...

You can find my code at the JS fiddle below: https://jsfiddle.net/xgthxp5t/1/

The problem exactly is on line 69 in the fiddle.

What added more to my confusion is that when I moved the "this.currentQuestionIndex++;" inside the "IF STATEMENT" within the Quiz.prototype.checkAnswer method, it worked fine with addEventListener!!!

Need your help to understand this.

2 Answers

Steven Parker
Steven Parker
215,958 Points

The difference is adding vs. replacing.

When you call addEventListener, the previous one is still active — you are adding another one so on the next event they will both fire. Then the next time you have three handlers that all fire and you deplete your resource of questions causing the error. You can observe the result of the multiple firing because the third question asked is actually the fourth question.

But when you assign onclick you are replacing the previous handler with a new one. While using this method you will always have only one handler for each event.

Another minor difference is in the handler code used for onclick you pass an argument to checkAnswer, but in the code applied with addEventListner there is no argument.

I removed the "checking" argument by mistake when I was trying to debug the code. but it still fires the same error.

Thanks for the explanation Steven but is there anyway to do this with addEventListener() though?

Steven Parker
Steven Parker
215,958 Points

Sure, but not with anonymous handlers. But if you define your handler separately as a named function, you could then use it as an argument to both addEventListner and then to removeEventListner later. But that's not as clean as what you already were doing with the onclick attribute.

But I think a better approach overall would be to establish the handler only once, and then use variables to control what it does each time it is invoked.

Steven Parker Ah so you mean defining the variables within the Quiz constructor function and put event listeners on the button there?

function Quiz(questions) {
  this.questions = questions;
  this.score = 0;
  this.currentQuestionIndex = -1;
  document.getElementById("guess0").addEventListener('click', this, false);
  document.getElementById("guess1").addEventListener('click',this, false);
}
Steven Parker
Steven Parker
215,958 Points

You can't use an object as an event handler.

But you could pass an object method:

someButton.addEventListener('click', this.myClickHandler, false);

But remember that inside the handler itself, "this" will not be the original object but the event target element instead.