为什么我的ES6代码收到未捕获的类型错误？ [重复]

Posted 2023-02-19

此问题已经在这里有了答案：

• Why does jQuery or a DOM method such as getElementById not find the element?8个答案

ES6的新手，并试图弄清在这个特定示例中我忽略了什么。

我有一个包含button和[[ID为#submitBtn的表单，我正在尝试向其中添加一个eventListener，以便当我单击“提交”按钮时，我得到警报消息-简单，对吧？

这是我到目前为止所拥有的：

class schedule constructor() this.submitBtn = document.querySelector("#submitBtn"); this.sayHello(); sayHello() this.submitBtn.addEventListener("click", () => alert("Hello!"); ) export default schedule;

当我检查控制台时，收到一条错误消息，内容为：
Uncaught TypeError: Cannot read property 'addEventListener' of null

[如果有人可以向我解释我所缺少或忽略的内容，我将不胜感激！

答案

您需要将this.sayHello()绑定到this。因此，在您的构造函数中，您需要this.sayHello = this.sayHello.bind(this)，或者您可以使用箭头功能避免这种情况。

class schedule constructor() this.submitBtn = document.querySelector("#submitBtn"); this.sayHello = this.sayHello.bind(this); this.sayHello(); sayHello() this.submitBtn.addEventListener("click", () => alert("Hello!"); ) export default schedule;