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

Question

正在尝试合并来自多个 div 的数值。

有时div的数量可以是1，有时div的数量可以是500。

试图找到一种方法将所有数值组合成“组合总数”的输出

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

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

<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>

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

Answer 1

将价格存储在变量中 (total)。 Select 使用 document.querySelectorAll('.item-price') 的所有价格，使用 forEach 遍历每个价格并使用 parseInt(element.innerHTML.substring(1) 解析价格，然后将其添加到总数中。

function addNums() {
  var total = 0;
  document.querySelectorAll('.item-price').forEach(e => total += parseInt(e.innerHTML.substring(1)));
  return total;
}

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

<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>

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

Answer 2

您可以从标签中抓取数字并使用 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"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>

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

Answer 3

function addNums() {
 let prices = document.getElementsByClassName('item-price');
 let sum = 0;
 for(let  i = 0; i < prices.length;i++){
     let p = prices[i].innerText
     p = p.substring(1)
     sum = sum+parseInt(p)
  }
  
  document.getElementById('total').innerHTML = sum;
    
}

addNums();

<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>

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

Answer 4

您可以将您的 JS 代码更改为：

function addNums() {
    var sum = Array.from(document.querySelectorAll('.item-price')).reduce((cum,x) => {
     return cum + parseInt(x.innerText.slice(1));
    },0);
    return '$' + sum;
}

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

<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>
<div class="item-price"></div>

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

使用 querySelectorAll 获取所有 .item-price div。此 return 是一个集合 而不是 数组，因此您可以使用 Array.from()
reduce 用于在从初始值开始对每个数组元素进行一些计算后将数组转换为单个合并值。这里我们从初始值 0 开始并添加每个项目的价格。
slice()用于切片arrays/strings，我们使用slice(1)从第一个索引中获取价格值（忽略$）。那将是一个字符串，因此我们使用 parseInt().
我们return值。

注意：简单地执行 var x = addNums 意味着 x 现在拥有该功能。 addNums() 执行该函数并执行 var x = addNums() 意味着 x 现在持有由 addNums 在执行时编辑的值 return。

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

Combine multiple number values into a total

html

javascript

numbers

dynamic

addition