当我在课堂上点击一个按钮时，我该如何获得警报

Question

我的网页中的"addbutton"类中有几个按钮，我希望每当单击其中任何一个按钮时都会弹出警报。你会怎么做？以下是我已经尝试过的一些JS代码(没有成功(：

addbuttons = document.getElementsByClassName("addbutton")
addbuttons.onclick {
for (var i=0; i<addbuttons.length; i++) {
alert("hi")
}

document.getElementsByClassName("addbutton").onclick = function() {
alert("hi")}

还有我的HTML:

<input type="checkbox"> 
<p>Breakfast:</p>
<button class="addbutton">+</button>
<div></div>
<br>
<input type="checkbox">
<p>Mid-Morning:</p>
<button class="addbutton">+</button>
<div></div>
<br>

Answer 1

document.getElementsByClassName("addbutton")返回一个数组(准确地说是HTMLCollection(。此外，您需要将onclick设置为函数，不能使用语法.onclick { }。

要为每个按钮设置一个监听器，您需要使用一个类似于的for循环

for(let i = 0; i < addbuttons.length; i++){
addbuttons[i].onclick = function(){
alert('Works!')
}
}

或者如果您正在使用ES6

for(let addButton of addbuttons){
addButton.onclick = function(){
alert('Works!')
}
}

可能是相关链接，

https://www.w3schools.com/js/js_loop_for.asp

https://www.w3schools.com/jsref/event_onclick.asp

Answer 2

让我们定义您的事件：

function myEvent() {
alert("hi");
}

现在，让我们按类名获取元素，循环它们，并为它们添加一个事件侦听器：

for (let btn of document.getElementsByClassName("addbutton")) btn.addEventListener("click", myEvent);

您的错误是，您假设getElementsByClassName返回的元素集有一个onclick，但集合内的元素只有onclick。