时间戳

首页 > 解决方案 > JS：为什么当我点击按钮时没有提示信息？

javascript - JS：为什么当我点击按钮时没有提示信息？

问题描述

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

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

clickButton.onclick = clickFunc;

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

console.log(clickButton);

我用 document.createElement 创建按钮

控制台日志返回这个

我尝试过：

  1. 像这样只选择一个按钮let clickButton = document.getElementsByClassName("buttonClass")[1];但什么都没有

  2. 我也尝试通过标记名获取元素，使用一定长度的按钮循环和添加事件侦听器，但再也没有

标签： javascriptonclickaddeventlistener

解决方案

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");
  });
}

推荐阅读