Question

我正在尝试用javascript创建一个计算器来处理我的技能。我已将班级num添加到我的所有带号码的按钮中。

我正在尝试显示当我使用此代码点击它们时，在控制台中显示这些按钮的innerHTML：

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

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

getNum();

然而我得到的只是

num.addEventListener不是函数。

这是我的代码：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);
})

Answer 2

getElementsByClassName返回元素集合，而不是单个元素。如果您想获得单个元素，请为其分配id属性并使用getElementById。这样您就可以使用addEventListener函数

Answer 3

这是一个可以直接插入codepen的解决方案：

var nums = document.getElementsByClassName('num');
[].forEach.call(nums, num => num.addEventListener('click', numClick));

function numClick(){
    // adding + turns the text into an actual number
    console.log(+this.innerHTML);
}

getElementsByClassName()会返回HTMLCollection，要对其进行迭代，您可以将其传递给[].forEach.call()，如上所示。

我还将处理程序重命名为numClick，因为它没有＆＃34;得到＆＃34;数字。并添加了+，这是将文本转换为数字的好方法（否则，添加两个数字会产生意外结果，例如"1" + "2" => "12"

Answer 4

当您将Jquery标记为您的问题时，我想您也可以使用Jquery。您可以抓取点击的元素的类，然后使用＆＃39; this'来获取它的文本。

    $('.num').click(function(){
      var x = $(this).text();
      console.log(x);
    });

这是一个工作示例，您可以查看console.log DEMO

Answer 5

.getElementsByClassName不是元素，而是它们的集合。您可以使用.getElementsByClassName(num)[element's sequential number]访问元素，或者更好地使用id和getElementById方法。

Answer 6

以下是您所需输出的修改代码。请复制并尝试：

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

  document.getElementById('result').innerHTML+=this.innerHTML; 
    console.log('value:'+this.innerHTML);
}

//getNum();

JS：我无法获得具有特定类名

6 个答案: