CODEWITHSUNDEEP
javascript
Collin DeSoto
Collin DeSoto

Reputation: 143

Adding "this" to event listener?

I was creating a quiz application and decided to switch from .onclick() to .addEventListener(). In order to get that to work I had to add event handlers.

The only way I got the listeners to work was by adding the following code to the Quiz object constructor..

document.getElementById('guess0').addEventListener('click', this);
document.getElementById('guess1').addEventListener('click', this);

This works but I am not sure why. What exactly is the "this" doing in place as a function?

Entire page of code for reference:

function Quiz(questions) {
  this.questions = questions;
  this.score = 0;
  this.currentQuestionIndex = -1;

  document.getElementById('guess0').addEventListener('click', this);
  document.getElementById('guess1').addEventListener('click', this);

  this.displayNext();
}

Quiz.prototype.displayNext = function(){
  this.currentQuestionIndex++;

  if(this.hasEnded()){
    this.displayScore();
    this.displayProgress();
  }else{
    this.displayCurrentQuestion();
    this.displayCurrentChoices();
    this.displayProgress();
  }
};

Quiz.prototype.hasEnded = function() {
 return this.currentQuestionIndex >= this.questions.length;
};

Quiz.prototype.displayScore = function() {
  let gameOverHtml = "<h1>Game is over!</h1>";
  gameOverHtml += "<h2>Your score was: " + this.score + "!</h2>";

  let quizDiv = document.getElementById('quizDiv');
  quizDiv.innerHTML = gameOverHtml;
};

Quiz.prototype.getCurrentQuestion = function() {
  return this.questions[this.currentQuestionIndex];
};

Quiz.prototype.displayCurrentQuestion = function() {
  let currentQuestion = document.getElementById('question');
  currentQuestion.textContent = this.questions[this.currentQuestionIndex].text;
};

Quiz.prototype.displayCurrentChoices = function() {
  let choices = this.getCurrentQuestion().choices;

  for (let i = 0; i < choices.length; i++) {
    let choiceHTML = document.getElementById('choice' + i);
    choiceHTML.innerHTML = choices[i];
  }
};

Quiz.prototype.handleEvent = function(event){
  if(event.type === 'click'){
    this.handleClick(event);  
  }
};

Quiz.prototype.handleClick = function(event){
  event.preventDefault();
  let choices = this.getCurrentQuestion().choices;

  if(event.target.id === "guess0"){
    this.guess(choices[0]);
  } else if(event.target.id === "guess1"){
    this.guess(choices[1]);
  }
  this.displayNext();
};

Quiz.prototype.displayProgress = function() {
  let footer = document.getElementById('quizFooter');
  if (this.hasEnded()) {
    footer.innerHTML = "You have completed the quiz!";
  } else {
    footer.innerHTML = "Question " + (this.currentQuestionIndex + 1) + " of " + this.questions.length;
  }
};

Quiz.prototype.guess = function(choice) {
  if (this.getCurrentQuestion().checkAnswer(choice)) {
    this.score++;
  }
};

Upvotes: 1

Views: 55

Answers (1)

Amadan
Amadan

Reputation: 198314

You are making Quiz a "class" (as we normally think about classes, even if JS doesn't really have them). When you do quiz = new Quiz(questions), inside the Quiz constructor, this refers to the newly created Quiz object. addEventListener can accept one of two different values for the listener parameter:

This must be an object implementing the EventListener interface, or a JavaScript function.

Your Quiz implements the requisite interface by implementing handleEvent function. Thus, when you pass your newly-created quiz (as this) to addEventListener, you will get quiz.handleEvent invoked when the event happens.

Upvotes: 3

Related Questions