Question

我创建了一个示例购物车，将数据存储在 localStorage 中并将其显示在购物车中。我遇到的问题是价格的总和，因为它一直在连接所有的价格值，但没有做它的总和。假设两个商品的价格分别为 100$ 和 600$，则总金额为 100600。

我该如何解决这个问题？

HTML 代码：

<div class="total"></div>

JavaScript：

const cTotal = cartbox.querySelector('.total');
let cartTotal = '';
let price = '';

JSON.parse(localStorage.getItem("items")).map(data=>
{
    price = data.price;
    for(var i = 0; i < price.length; i++)
    {
        cartTotal += price[i];
    }
});
cartTotal = '<p class="amount">Total Amount: '+cartTotal+'</p>'

cTotal.innerHTML = cartTotal;

Answer 1

首先，为了避免type coersion，改变这一行

let cartTotal = '';

为此：

let cartTotal = 0;

接下来，要强制在另一端输入强制转换，请更改此行：

cartTotal += price[i];

为此：

cartTotal += Number.parseInt(price[i]);

或到support floats：

cartTotal += Number.parseFloat(price[i]);

Answer 2

试试：

let cartTotal = 0;

price = data.price;

for(var i = 0; i < price.length; i++)
{
  cartTotal += parseFloat(price[i]);
}

完整代码：

HTML CODE: 
<div class="total"></div>


JavaScript:
 const cTotal = cartbox.querySelector('.total');
 let cartTotal = 0;
 let price = 0;

  JSON.parse(localStorage.getItem("items")).map(data=>
  {
      price = data.price;
      for(var i = 0; i < price.length; i++)
      {
            cartTotal += parseFloat(price[i]);
       }
   });
    cartTotal = '<p class="amount">Total Amount: '+cartTotal+'</p>'
           
    cTotal.innerHTML = cartTotal;

Answer 3

您只需添加 parseInt 以确保您的价格采用数字格式除此之外，像这样将 cartTotal 的初始值更改为 0

 const cTotal = cartbox.querySelector('.total');
 const parsedData = JSON.parse(localStorage.getItem("items")); 
 let cartTotal = 0;

 parsedData.map(data => {
      for(var i = 0; i < data.price.length; i++)
      {
          cartTotal += parseInt(data.price[i]);
      }
 });

 cartTotal = '<p class="amount">Total Amount: '+cartTotal+'</p>'          
 cTotal.innerHTML = cartTotal;

<块引用>

注意：如果价格在句点后可能有数字，请改用 parseFloat

Answer 4

试试这个：

    price = data.price;
    cartTotal = price.reduce(function(a,b){
            return a+b;
          });

如何在购物车中计算购物车总价？

4 个答案: