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>`

Answer 2

你在for循环中使用itemcontainer.innerHTML += itemcard;时出错了一件事你需要首先在for循环conatiner += itemcard;中创建html的对象然后你必须使用外部的conatiner对象这样循环itemcontainer.innerHTML = conatiner;

因为在循环结束后你有一个完整的对象可以插入你的DOM，现在它只会显示一个结果。

Answer 3

你的html不应该包含它们应该是唯一的公开ID，首先让我们移动id为类：

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 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 productprice" >${price}</div>
        <div class="product-quantity">
        <input type="number productquantity" value=${quantity} min="1">
        </div>
        <div class="product-removal">
        <button class="remove-product"> Remove </button>
        </div>
        <div class="product-line-price" id='productlineprice' >25.98</div>
        </div>
                  `;
                itemcontainer.innerHTML += itemcard;
} 
//get this out of the for loop
calculatelinetotal()

现在让我们修复js代码来处理这些变化：

function calculatelinetotal(){
   //use ByClassName instead of ById
   var pricesList = document.getElementByClassName('productprice').innerHTML;
   var quantitiesList = document.getElementByClassName('productquantity').value;

   var total = 0;
   for (var i = 0 ; i < pricesList.length ; i++ ) {
       var price = pricesList[i].value.replace('$','');
       var quantity = quantitiesList[i].value;
       total = price + quantity;
   }
   document.getElementById('productlineprice').innerHTML = total;
}

或者更改此部分：

var total = 0;
var arrayLength = cartarry.length;
for (var i = 0; i < arrayLength; i++) {
    total += cartarry[i].price.replace('$',"") + cartarry[i].quantity
    //etc......
    document.getElementById('productlineprice').innerHTML = total;
}

Answer 4

您可以通过向id添加数组索引来获取不同的元素id，并传递相同的数组索引来计算行总数。另外，从标签读取价格不是一个好的ID，因为它可以由用户修改。如果你能直接向calculatelinetotal（）函数提供价格会更好。

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

4 个答案: