当我单击班级中的按钮时，如何获得提醒？答案

【问题标题】：How would I get an alert to appear when I click on an a button in a class?当我单击班级中的按钮时，如何获得提醒？
【发布时间】：2020-07-21 11:50:31
【问题描述】：

我的网页中的“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>

【问题讨论】：

标签： javascript button onclick

【解决方案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/jsref/event_onclick.asp

【讨论】：

【解决方案2】：

让我们定义你的事件：

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

现在让我们通过类名获取你的元素，循环它们并为它们添加一个事件监听器：

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

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

【讨论】：