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

问题描述

尝试组合来自多个 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>

解决方法

您可以从标签中获取数字并使用 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>

将价格存储在变量 (total) 中。使用 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">$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>

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">$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>

你可以把你的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">$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>

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

注意：简单地执行 var x = addNums 意味着 x 现在拥有函数。 addNums() 执行函数并执行 var x = addNums() 表示 x 现在保存 addNums 在执行时返回的值。

addition dynamic dynamic dynamic html javascript numbers