javascript - JS : I can't get the inner HTML of elements with a specific class name

Question

我正在尝试用 javascript 创建一个计算器来锻炼我的技能。我已将 num 类添加到所有具有数字的按钮。

当我使用以下代码单击这些按钮时，我试图在控制台中显示这些按钮的 innerHTML:

var num = document.getElementsByClassName('num');
num.addEventListener('click', getNum);

function getNum(){
    console.log(num.innerHTML);
}

getNum();

但是我得到的只是

num.addEventListener is not a function.

这是我的代码笔:https://codepen.io/teenicarus/pen/wrEzwd

我做错了什么？

Answer 1

您需要像下面这样更改代码。 getElementsByClassName 返回元素集合。遍历元素并添加 click 事件监听器。在 getNum 中，您可以使用 this 访问被点击的按钮。

var num = document.getElementsByClassName('num');

for (var i = 0; i < num.length; i++) {
        num[i].addEventListener('click', getNum);
}

function getNum(){
    console.log(this.innerHTML);
}

您还可以像下面这样使用Array forEach:

[].forEach.call(num, function(el){
  el.addEventListener('click', getNum);
})