javascript - JS : Sum of span values in For loop

Question

我在跨度标记中有以下值:

<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>