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

getAttribute of elements with some class doesn't work

本文关键字：元素 getAttribute 不起作用      更新时间：2023-09-26

我有一些带有特定类的输入字段。它们都有一个数据属性，比如具有整数值的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（我不认为是这样）。

不要使用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

更新的Fiddle

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

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属性是其项的索引。

检查此项：

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 上

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

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Attributes</h1>
<h2>The value Property</h2>
<p>The value property returns the value of an attribute:</p>
<ins class="demo" data-ad-slot="ciao"></ins>
<ins id="demob"></ins>
<script>
const element = document.getElementsByClassName('demo')[0];
let value = element.attributes["data-ad-slot"].value;
document.getElementById("demob").innerHTML = value;
</script>
</body>
</html>

相关文章：