添加事件侦听器未连接到按钮答案

【问题标题】：Add Event Listener not Connecting to Button添加事件侦听器未连接到按钮
【发布时间】：2020-08-12 05:09:01
【问题描述】：

我正在尝试单击一个按钮，然后该按钮会将我页面上的叠加显示更改为无。在控制台中它告诉我，startButton.addEventListener 不是一个函数。有人可以帮我找出错误吗？

const letters = document.getElementById('qwerty');
const keyWords = document.getElementById('phrase');
const startButton = document.getElementsByClassName('btn__reset');
const overlay = document.getElementsByClassName('main-container');
var missed = 0;

startButton.addEventListener("click", function(){
overlay.style.display = 'none';
});

【问题讨论】：

你试过调试代码吗？你检查startButton 是否是console.log() 的实际元素？
欢迎来到 SO！请出示您的 HTML。除此之外，使用startButton[0]，因为elementsByClassName 返回一个HTMLCollection。如果要将侦听器添加到每个按钮，请使用循环。

标签： javascript dom-events addeventlistener

【解决方案1】：

getElementsByClassName 不返回单个元素 - 它返回所有匹配元素的数组HTMLCollection。您无法将事件侦听器附加到非元素。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

如果您只想获取与某个类匹配的第一个元素，您可以使用 const startButton = document.querySelector('.btn__reset');（点表示选择器是类名）

或者像这样访问getElementsByClassName的返回值的第一项： const startButton = document.getElementsByClassName.item(0);（你可能想先检查它是否存在）

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

【讨论】：

【解决方案2】：

就目前而言，您的“startButton”常量实际上是从这里返回一个集合：

document.getElementsByClassName('btn__reset');

即使它只是一个对象的集合，您也需要更深入地获得正确的对象

我建议使用

.getElementById('buttonID');

相反。这只会返回一个元素来附加你的监听器。

【讨论】：

【解决方案3】：

使用 getElementById 获取按钮，它可以工作

let startButton = document.getElementById('button');

startButton.addEventListener("click", function(){
  console.log('yes');
});

&lt;button id="button"&gt;Go!&lt;/button&gt;

【讨论】：

你怎么知道 OP 在他们的 HTML 中有一个 <button id="button"></button> 元素？
getElementsByClassName 实际上返回一个 NodeList，这是对 OP 的建议，以便更好地处理点击事件。
它返回一个 HTMLCollection。 OP 可能不想或无法更改其 DOM，实际上可能希望将处理程序附加到许多按钮。我们需要更多信息才能写出答案。