For 循环中跨度值的总和（适用于 IE10）

Question

我在 span 标签中有以下值：

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

在 JS 中我想得到这些值的总和。我有这段代码可以做到这一点（有效，...但是）：

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

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

但是，此代码在 Internet Explorer 10（可能还有旧版本）中不起作用，因为不支持 ECMA 6 箭头。

现在我正在尝试编写一些也可以在 IE 中使用的代码，但我还不太明白。我确实有一个版本，我可以在其中使用跨度中的文本，但我无法将其转换为整数，因为出现 NaN 错误：

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]));
    totaalPersonen = parseInt(totaalPersonen) +parseInt(spans[i]);
    //alert(totaalPersonen);
}
alert(totaalPersonen);

如何将跨度值转换为整数并求和？

Answer 1

您正在直接访问跨度并尝试将它们相加；相反，您必须访问范围内的内容。

检查以下代码段：

var div = document.getElementById("aantallen");
var spans = div.querySelectorAll("span");

var totaalPersonen = 0;
for(i=0;i<spans.length;i++)
{
   const content = Number(spans[i].innerHTML)
    alert(content);
    totaalPersonen = Number(totaalPersonen) +content;
    alert(totaalPersonen);
}

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

Answer 2

您正在正确获取对象但未正确访问它的值，您需要在每个元素中使用 innerHTML 来获取它。

您正在使用：（它是 DOM 节点对象）

spans[i]

您需要使用：（各自的DOM节点innerHTML值）

spans[i].innerHTML

我已经构建了一个功能性的jsfiddle，看一看：

https://jsfiddle.net/rpichioli/w3m0cc1g/

For 循环中跨度值的总和（适用于 IE10）

Sum of span values in For loop (working in IE10)

javascript

for-loop

sum

internet-explorer-10