JS：我无法获取具有特定类名的元素的内部HTML

我试图用JavaScript创建一个计算器来处理我的技能。我已将课程num添加到我的所有带编号的按钮。JS：我无法获取具有特定类名的元素的内部HTML

我想显示显示在控制台这些按钮的innerHTML，当我使用此代码单击其中：

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

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

getNum();

但是我得到的是

num.addEventListener是不是功能。

这里是我的codepen：https://codepen.io/teenicarus/pen/wrEzwd

什么可能我是做错了什么？

来源

2017-10-13 Thierry Diallo

getElementsByClassName - note“elementS”there - this is plural form。这意味着你没有得到一个或null，但你得到0 ... n项。这导致我们导致，该函数返回数组（或者NodeList），而不是一个项目。并且数组不能听事件:-) – SergeS

'getElementsByClassName'返回具有相同类名的元素或标签的数组。所以要小心。 – Miraj50

这里是你可以在你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，因为它不会“获取”数字。并添加+，这是一个很好的快捷方式将文本转换为数字（否则，添加两个数字会产生意想不到的结果，如"1" + "2" => "12"

来源

2017-10-13 11:28:29

您需要更改下面的代码。 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); 
})

来源

2017-10-13 11:17:45

有道理。可以使用forEach吗？就是想。如果是，它会更好吗？ – Harman

@哈曼是的，这是可能的。见上面的更新。 –

太棒了！谢谢！ – Harman

getElementsByClassName返回元素的集合，而不是一个单一的元素。如果要获取单个元素，请将其指定为id属性，并使用getElementById。这样你可以使用addEventListener函数

来源

2017-10-13 11:19:16 saidfagan

当你将Jquery标记为你的问题时，我想你也可以使用Jquery。你可以抓住被点击的元素的类，并用'this'来获取它的文本。

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

这是一个工作例子，你可以检查的console.log DEMO

来源

2017-10-13 11:19:31

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

来源

2017-10-13 11:26:57 Owl

你的意思是写出10个独立但几乎相同的命令？这里不是很好的建议。 –

这里是您所需输出的修改代码。只需复制并尝试：

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();

来源

2017-10-13 11:31:18

JS：我无法获取具有特定类名的元素的内部HTML

回答

相关问题