JS：For循環中的跨度值總和

Question

我在span標簽中具有以下值：

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

在JS中，我想獲取這些值的總和。 所以我做了以下For循環：

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)但無法正常工作。

Answer 1

您需要將DOM元素的內容轉換為Number 。 然后，您可以使用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

要將字符串轉換為Java中的Int，請使用：

parseInt（totaalPersonen）;

Answer 3

您正在重新初始化var totaalPersonen = totaalPersonen + i; 在每個循環中。 因此，您需要像這樣在循環外初始化totaalPersonen var totaalPersonen = 0; 並在循環內像totaalPersonen = totaalPersonen + 1;一樣將其計數 或只是totaalPerseonen++;

Answer 4

嘗試此操作假設您要在我使用過innerHTML而不是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);