Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ahmed Magdy
Courses Plus Student 564 PointsaddEventListener 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
230,946 PointsThe 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.
Ahmed Magdy
Courses Plus Student 564 PointsSteven 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
230,946 PointsYou 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.
Ahmed Magdy
Courses Plus Student 564 PointsAhmed Magdy
Courses Plus Student 564 PointsI 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
230,946 PointsSteven Parker
230,946 PointsSure, 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.