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

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;

在jsFiddle上看到它

在(firefox)控制台中,我得到:

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

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

我不希望使用jQuery,除非绝对必要的(我不认为这是).

Answer 1

而不是使用for-in语句,使用简单的for语句,如:

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

更新小提琴

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

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