javascript - 将多个数值组合成一个总数

Question

试图组合来自多个 div 的数值。
有时 div 的数量可以是 1，有时 div 的数量可以是 500。
试图找到一种方法将所有数值组合成“组合总数”的输出

function addNums() {
    var sum = ('.item-price' + '.item-price');
}

document.getElementById('total').innerHTML = addNums;

<div class="item-price">$84</div>
<div class="item-price">$8</div>
<div class="item-price">$14</div>
<div class="item-price">$66</div>
<div class="item-price">$22</div>
<div class="item-price">$34</div>
<div class="item-price">$16</div>
<div class="item-price">$6</div>
<div class="item-price">$14</div>

<div class="item-total">Total:
  <span id="total" class="total" ></span>
</div>

Answer 1

您可以从标签中获取数字并使用reduce 相互添加。

Array.from从 DOM 数组中创建一个普通数组

然后我们将所有文本放入标签中，去除美元符号并将它们设为数字

最后，将它们与 reduce 相加。

const items = Array.from(document.getElementsByClassName("item-price")).map(item => +item.innerText.substr(1));

document.getElementById('total').innerHTML = items.reduce((a,b) => a + b);

<div class="item-price">$84</div>
<div class="item-price">$8</div>
<div class="item-price">$14</div>
<div class="item-price">$66</div>
<div class="item-price">$22</div>
<div class="item-price">$34</div>
<div class="item-price">$16</div>
<div class="item-price">$6</div>
<div class="item-price">$14</div>

<div class="item-total">Total:
  <span id="total" class="total" ></span>
</div>