JS：ループ

Question

のために、私はspanタグ内に以下の値を持つスパン値の合計：JSで

<div id="aantallen"> 
<span>3</span> 
<span>2</span> 
</div> 

は、私は、これらの値の合計を取得したいです。だから私は以下のFor Loopを作った：

var div = document.getElementById("aantallen"); 
var spans = div.getElementsByTagName("span"); 
for(i=0;i<spans.length;i++) 
{ 
    var totaalPersonen = totaalPersonen + i; 
    alert(totaalPersonen); 
} 

しかし、3と2は警告でNanを得る。私の質問：どのように私はこれらの値の合計を作ることができるように文字列に3と2を変換することができますか？

私はString（i）を試しました。それを働かせることはできませんでした。

ありがとうございました。 Javascriptを、使用中のintに文字列を変換するには

Answer 1

あなたはNumberにDOM要素の内容を変換する必要があります。 次に、合計を計算するためにreduceを使用することができます。魔法のように

const spans = document.querySelectorAll('#aantallen span'); 
 

 
const result = Array.from(spans).reduce((sum, spanElm) => sum + Number(spanElm.textContent), 0) 
 

 
console.log(result);

<div id="aantallen"> 
 
    <span>3</span> 
 
    <span>2</span> 
 
</div>

Answer 2

：

のparseInt（totaalPersonen）。

Answer 3

すべてのループでvar totaalPersonen = totaalPersonen + i;を再初期化しています。 だから、あなたはちょうどあなたが、私はinnerHTMLを使用しているスパン内のテキストを追加したいと仮定すると、この を試してみてくださいtotaalPersonen = totaalPersonen + 1;か、単にtotaalPerseonen++;

Answer 4

ようにそれをカウントアップこのvar totaalPersonen = 0;ように、ループ内のループの外totaalPersonenを初期化する必要があり、 iではありません。 また、totaalPersonen変数はforループの外側で宣言する必要があります。それ以外の場合は毎回再初期化されます。

var div = document.getElementById("aantallen"); 
var spans = div.getElementsByTagName("span"); 
console.log(spans); 
var totaalPersonen = 0; 
for(i=0;i<spans.length;i++) 
{ 
    alert(parseInt(spans[i].innerHTML)); 
    totaalPersonen = parseInt(totaalPersonen) + parseInt(spans[i].innerHTML); 
    //alert(totaalPersonen); 
} 
alert(totaalPersonen);