JS：For循环中跨度值的总和答案

【问题标题】：JS: Sum of span values in For loopJS：For循环中跨度值的总和
【发布时间】：2018-05-22 12:49:09
【问题描述】：

我在 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)，但无法正常工作。

【问题讨论】：

标签： javascript string for-loop sum type-conversion

【解决方案1】：

要在 Javascript 中将字符串转换为 Int，请使用：

parseInt(totaalPersonen);

【讨论】：

【解决方案2】：

您在每个循环中都重新初始化var totaalPersonen = totaalPersonen + i;。所以你需要像var totaalPersonen = 0;这样在循环外初始化totaalPersonen，而在循环内只需像totaalPersonen = totaalPersonen + 1;或totaalPerseonen++;一样计数它

【讨论】：

【解决方案3】：

试试这个假设您想在我使用的跨度内添加文本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);

【讨论】：

【解决方案4】：

您需要将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>

【讨论】：

像魅力一样工作。感谢您的意见！
您可能希望专门针对 id：querySelectorAll('#aantallen span')。
更新了，谢谢。