添加事件偵聽器未連接到按鈕

Question

我正在嘗試單擊一個按鈕，然后將我頁面上的覆蓋顯示更改為無。 在控制台中它告訴我， startButton.addEventListener不是 function。 有人可以幫我找到錯誤嗎？

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

Answer 1

getElementsByClassName不返回單個元素 - 它返回所有匹配元素的類似數組的HTMLCollection 。 您無法將事件偵聽器附加到非元素。

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

如果您只想獲取與 class 匹配的第一個元素，可以使用const startButton = document.querySelector('.btn__reset'); （點表示選擇器是 class 名稱）

或者像這樣訪問getElementsByClassName返回值的第一項： const startButton = document.getElementsByClassName.item(0); （您可能想先檢查它是否存在）

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

Answer 2

就目前而言，您的“startButton”常量實際上是從中返回一個集合：

document.getElementsByClassName('btn__reset');

即使它只是一個 object 的集合，您也需要再深入 go 才能獲得正確的一個

我建議使用

.getElementById('buttonID');

反而。 這只會返回一個元素來附加你的監聽器。

Answer 3

使用 getElementById 獲取您的按鈕，它可以工作

 let startButton = document.getElementById('button'); startButton.addEventListener("click", function(){ console.log('yes'); });

 <button id="button">Go!</button>