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) コンソールでは、次のようになります。

TypeError: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(result of 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 に答える
1

その理由に関する限り、for-in ループは、関数 (および継承されたプロパティ) を含むオブジェクトのすべてのプロパティを循環します。

于 2013-06-25T07:21:51.510 に答える