Uncaught TypeError: document.getElementsByClassName(..).addE

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").forEach(element => {
element.onclick = event => {
alert("Listener added");
}
}); 

如果你想为一个特定的元素添加事件监听器，你可以简单地通过索引数组来访问它。

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

您还可以为特定的元素使用id，以便更容易地访问它们。