CODEWITHSUNDEEP
javascriptoopconstructorclosuresprototype
Limpuls
Limpuls

Reputation: 876

How to use constructor's method for an event listener

So I'm working on OO Quiz app and I have Quiz constructor, which is supposed to launch the quiz app itself with all the questions and so on. First thing I want to do it is when user types his name and email and clicks the submit button, console.log his new created User object with name, email and so on in JSON string. I gave Quiz prototype a method clickBtn that checks whether the inputs are not empty and if are not, then give me the JSON string.

After the method, I added event listener on a button and gave it not a random function but prototype.clickBtn method. Unfortunately, I keep getting Uncaught ReferenceError: clickBtn is not defined error. What is the problem? Code snippet:

function Quiz (User, Question) {
  this.user = User;
  this.question = Question;
}

Quiz.prototype.constructor = Quiz;

Quiz.prototype.clickBtn = function () {
      if (theName.value == "") {
        var message = document.createElement("p");
        message.className = "message";
        message.innerHTML = "You forgot the name and email";
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(message);
      } else {
        var message = document.getElementsByClassName("message")[0]; // first one
        message.parentNode.removeChild(message);
        console.log(message);
        var user1 = new User (theName.value, theEmail.value);
        users.push(user1);
        console.log("Quiz Created On: " + this.getQuizDate);
        console.log(JSON.stringify(users, null, 2));
      }
      theName.value = "";
      theEmail.value = "";
}

var btn = document.getElementById("button");
btn.addEventListener("click", clickBtn);

Upvotes: 0

Views: 1088

Answers (2)

Martha
Martha

Reputation: 198

First, create an instance of Quiz:

var quiz = new Quiz;

Then append your event listener as a method of your Quiz object. 

btn.addEventListener("click", quiz.clickBtn);

Upvotes: 1

Ayush Sharma
Ayush Sharma

Reputation: 2107

You have to add the clickBtn method of Quiz method, currently you are using clickBtn, but clickBtn is method of Quiz, so to access clickBtn, you need to call it with instance of Quiz method

Upvotes: 0

Related Questions