如何将构造函数的方法用于事件侦听器

时间:2017-05-02 13:00:11

标签: javascript oop constructor closures prototype

所以我正在开发OO Quiz应用程序,我有Quiz构造函数,它应该用所有问题启动测验应用程序本身等等。我想要做的第一件事是当用户键入他的名字和电子邮件并单击提交按钮时,console.log用JSON字符串中的新名称,电子邮件等创建的User对象。我给了Quiz原型一个方法clickBtn,检查输入是否为空,如果不是,则给我JSON字符串。

在方法之后,我在一个按钮上添加了事件监听器,并且它不是一个随机函数,而是prototype.clickBtn方法。不幸的是,我一直收到Uncaught ReferenceError: clickBtn is not defined错误。问题是什么?代码段:

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

2 个答案:

答案 0 :(得分:1)

首先,创建一个测验实例:

var quiz = new Quiz; 

然后将您的事件侦听器附加为Quiz对象的方法。

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

答案 1 :(得分:0)

你必须添加Quiz方法的clickBtn方法,目前你正在使用clickBtn,但clickBtn是Quiz的方法,所以要访问clickBtn,你需要用Quiz方法实例调用它