Question

我有一些特定类的输入字段。它们都有一个数据属性，比如data-somedata，带有一个整数值。我必须计算这些数据属性的总和。我尝试将getAttribute与getElementsByClassName结合使用，但这不起作用。

我正在使用此代码：

<input class="datainput" value="The 1st input" type="text" data-somedata="8"/>
<input class="datainput" value="The 2nd input" type="text" data-somedata="15"/>
<div id="result"></div>

var fields = document.getElementsByClassName('datainput');
var result = 0;
for (var i in fields) {
    result += fields[i].getAttribute('data-somedata');
}
document.getElementById('result').innerHTML = 'The sum is: ' + result;

See it live on jsFiddle

在（firefox）控制台中，我得到：

TypeError：fields[i].getAttribute不是函数

这是为什么？我该如何解决？

我不想要使用jQuery，除非绝对必要（我不认为是）。

Answer 1

使用简单的for语句，而不是使用for-in语句，如下所示：

var fields = document.getElementsByClassName('datainput');
var result = 0;
for (var i = 0; i < fields.length; i ++) {
    var val = parseInt(fields[i].getAttribute('data-somedata'), 10);
    result += val;
}
document.getElementById('result').innerHTML = 'The sum is: ' + result;

此外，getAttribute的结果是字符串，您必须在执行添加操作之前使用parseInt()将其强制转换为整数。否则，将执行字符串连接以产生结果：

总和是：0815

Updated Fiddle

for-in语句不起作用的原因是for-in迭代目标对象的属性，在您的情况下为HTMLCollection（getElementsByClassName的结果）。事实上，你可以使用这个丑陋的片段来使用for-in：

var c = 0;

for(var i in fields) {
    if(c == fields.length) break;
    c ++;    
    console.log(fields[i].getAttribute('data-somedata'));
}

HTMLCollection的第一个n = fields.length属性是其项目的索引。

Answer 2

检查一下：

var fields = document.getElementsByClassName('datainput');
var result = 0;

for (var i = 0; i < fields.length; i++) {        
    result += parseInt(fields[i].getAttribute('data-somedata'));
}
document.getElementById('result').innerHTML = 'The sum is: ' + result;

On jsfiddle

Answer 3

就原因而言，for-in循环将遍历对象的所有属性，包括函数（和继承的属性）。

具有某些类的元素的getAttribute不起作用

3 个答案: