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

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

试试这个：

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

Answer 2

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

let cartTotal = '';

对此：

let cartTotal = 0;

接下来，为了 force 在另一端键入强制，更改此行：

cartTotal += price[i];

对此：

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

或 support floats:

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

Answer 3

尝试：

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 4

您只需添加 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;

Note: if the prices may have numbers after the period use parseFloat instead

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

How to make total of cart price in a shopping cart?

javascript

local-storage