未捕獲的類型錯誤：document.getElementsByClassName(...).addEventListener 不是函數

Question

我需要監聽對<input/>元素的點擊。 這是我的代碼

<script>
    document.getElementsByClassName("form-control").addEventListener("click", function(e){
      alert("Listener added");
    });
</script>    

但我收到此錯誤：

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

有任何想法嗎？

Answer 1

getElementsByClassName()不是返回單個元素，而是返回元素集合。這就是為什么我們必須循環該元素集合，或者您可以通過添加document.getElementsByClassName('form-control')[0]來解決這個問題

在這里，我重寫了代碼：

`

document.getElementsByClassName("form-control")[0].addEventListener("click", function(e){
  alert("Listener added");
});

`

希望我能夠回答你的問題。 JavaScript事件處理可能對您有用。

Answer 2

您收到此錯誤的原因是因為 getElementsByClassName 返回一個元素數組，但您需要有一個元素才能添加事件偵聽器。 如果你想為所有元素添加事件監聽器，你可以簡單地循環遍歷數組，如下所示。

document.getElementsByClassName("form-control").forEach(element => {
  element.onclick = event => {
    alert("Listener added");
  }
}); 

如果要將事件偵聽器添加到特定元素，只需通過索引數組即可訪問它。

document.getElementsByClassName("form-control")[0].addEventListener("click", function(e){
  alert("Listener added");
}); 

您還可以為特定元素使用 id，以便更輕松地訪問它們。