Question

我尝试了下面的代码，但是当我单击按钮时没有显示警报消息！

let clickButton = document.getElementsByClassName("buttonClass");

clickButton.onclick = clickFunc;

function clickFunc(){ alert("hello")};

console.log(clickButton);

i create buttons with document.createElement

console log return this

我试过了：

只选择一个这样的按钮let clickButton = document.getElementsByClassName("buttonClass")[1];但什么都不选择
我也尝试通过标记名获取元素，使用一定长度的按钮进行循环，并添加事件侦听器，但什么也没有

Answer 1

let buttons = document.getElementsByClassName("buttonClass");
for (var i = 0; i < buttons.length; i++) {
  buttons.item(i).addEventListener('click', function(e) {
    alert("hello");
  });
}

<button type="button" class="buttonClass">button 1</button>
<button type="button" class="buttonClass">button 2</button>
<button type="button" class="buttonClass">button 3</button>
<button type="button" class="buttonClass">button 4</button>
<button type="button" class="buttonClass">button 5</button>

由于您按类别定位，因此您将获得一组元素。所以你必须迭代并将点击事件附加到每个元素，如下所示；

let buttons = document.getElementsByClassName("buttonClass");
for (var i = 0; i < buttons.length; i++) {
  buttons.item(i).addEventListener('click', function(e) {
    alert("hello");
  });
}

JS：为什么当我点击按钮时不提示消息？

1 个答案: