javascript - 数组中每个元素的函数无法正常工作

Question

我有一个购物车，正在通过本地存储数据填充。

var arrayLength = cartarry.length;
for (var i = 0; i < arrayLength; i++) {

    var id = cartarry[i].id;

    var name = cartarry[i].name;
    var price = cartarry[i].price.replace('$', "")
    var quantity = cartarry[i].quantity;

    var itemcontainer = document.getElementById('myContent');
    var itemcard = `
      <div>
          <div>
            <div>Dingo Dog Bones</div>
            <p>${name}</p>
          </div>
          <div>${price}</div>
          <div><input min="1" type="number" value="${quantity}" /></div>
          <div><button> Remove </button></div>
          <div>25.98</div>
      </div>
                 `;

    itemcontainer.innerHTML += itemcard;
    calculatelinetotal()
}

这是我的calculatelinetotal()函数

function calculatelinetotal() {
    var price1 = document.getElementById('productprice').innerHTML;
    var quantity = document.getElementById('productquantity').value;

    var price = price1.replace('$', '')
    var total = parseInt(price * quantity);

    document.getElementById('productlineprice').innerHTML = total;
}     

这样做的问题是它只计算第一个产品的总价，而不是每个产品的总价。这是输出

我做错了什么以及如何让它动态计算每行的总数和购物车总数。

Answer 1

您正在计算和解析字符串，而无需这样做。更不用说它还会影响应用程序的性能。

我的建议是遵循与 id、name、price 和 quantity 使用的相同方法这样您就可以立即计算每个项目的总计(实际上您不需要 calculatelinetotal)

var price = parseInt(cartarry[i].price.replace('$',""))
var quantity = parseInt(cartarry[i].quantity);

const total = price * quantity

const item card = `
  <div class="product" id="${id}">
    <div class="product-details">
    <div class="product-title">Dingo Dog Bones</div>
    <p class="product-description"> ${name}</p>
    </div>
    <div class="product-price" id='productprice'>${price}</div>
    <div class="product-quantity">
    <input type="number" id='productquantity' value=${quantity} min="1">
  </div>
  <div class="product-removal">
  <button class="remove-product"> Remove </button>
  </div>
  <div class="product-line-price">{total}</div>
  </div>`