4

我有一些带有特定类的输入字段。它们都有一个数据属性，比如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）控制台中，我得到：

类型错误：fields[i].getAttribute不是函数

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

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

4

3 回答 3

9

不要使用 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是其项目的索引。

于 2013-06-25T07:21:10.100 回答
3

检查这个：

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;

在 jsfiddle 上

于 2013-06-25T07:20:10.830 回答
1

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

于 2013-06-25T07:21:51.510 回答