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>