So verwenden Sie die Methode des Konstruktors für einen Ereignis-Listener

Question

So arbeite ich an OO Quiz App und ich habe Quiz-Konstruktor, der die Quiz-App selbst mit allen Fragen und so weiter starten soll. Das erste, was ich tun möchte, ist, wenn der Benutzer seinen Namen und seine E-Mail-Adresse eingibt und auf den Submit-Button console.log klickt, sein neu erstelltes User-Objekt mit Name, E-Mail usw. in JSON-String. Ich gab Quiz Prototyp eine Methode clickBtn, die überprüft, ob die Eingänge nicht leer sind und wenn nicht, dann geben Sie mir die JSON-Zeichenfolge.

Nach der Methode habe ich Ereignis-Listener auf eine Schaltfläche hinzugefügt und gab es keine zufällige Funktion aber prototype.clickBtn Methode. Leider bekomme ich immer Uncaught ReferenceError: clickBtn is not defined Fehler. Was ist das Problem? Codeausschnitt:

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

Answer 1

Zuerst eine Instanz Quiz erstellen:

var quiz = new Quiz; 

Dann als Methode Ihres Quiz Objekt Ihre Event-Listener anhängen.

Answer 2

Sie haben die clickBtn Methode der Quiz Methode hinzuzufügen, die derzeit verwenden Sie clickBtn, aber clickBtn ist Methode von Quiz, so den Zugriff auf clickBtn, müssen Sie es mit Instanz von Quiz-Methode aufrufen