开发者问题收集

如何解决事件监听器不起作用的问题？以及如何获取输入的文本值？

2021-02-21
1541
javascript

我尝试使用 eventListener 进行简单的按钮提交，但不起作用，您能解决此问题吗？ 错误代码如下： 

Uncaught TypeError: Cannot read property 'addEventListener' of null

代码如下： 

function getData() {
  console.log('Hello World! ');
}
document.getElementById('submit').addEventListener('click', getData());
3个回答

似乎您将事件附加到元素在DOM中之前的元素。您可以将代码放在 body 标签的底部，也可以将事件连接到 domcontentloaded 。这将确保仅在DOM满载后才将事件附加到元素上。因此，该元素可以访问。

另外，您可能不希望在页面加载上执行事件处理程序功能，因此您应在功能：

678973792
Mamun
2021-02-21

此行代码 

document.getElementById('submit')

返回 null ，正如错误所明确指出的那样。因此，您需要在 HTML 中有一个 id 为 submit 的元素。 

<button id="submit">Click me</button>

另请注意，您的侦听器将立即执行该函数，正确的编写方式是 

document.getElementById('submit').addEventListener('click', getData);

或者最好是 

document.getElementById('submit').addEventListener('click', function() {
     getData()
});
Kokodoko
2021-02-21

我的建议： 

submit.onclick = () => {
  // getData();
  console.log("clicked!");
}
<button id="submit">Get Data</button>
AbsoluteBeginner
2021-02-21