无法减去购物车中的总价，但当页面刷新时，我得到了正确的价格

Question

我正在构建一个有两个页面和两个Javascript文件的电子商务网站，即：(index.html、cart.html、apps.js和cart.js(。单击删除按钮后，我如何减去购物车(cart.html(的总价？

这是我的代码：

// cart functionality
table.addEventListener("click", event => {
if (event.target.classList.contains('fa-close')) {
let removeItem = event.target;
console.log('df', removeItem);
let id = removeItem.dataset.id;
console.log(id);
table.removeChild(removeItem.parentElement.parentElement);
var obj = JSON.parse(localStorage.getItem("cart")) || {}; //fetch cart from storage

var items = obj || []; //get the products
for (var i = 0; i < items.length; i++) { //loop over the collection
if (items[i].id === id) { //see if ids match
items.splice(i, 1); //remove item from array
break; //exit loop
}
}
localStorage.setItem("cart", JSON.stringify(obj)); //set item back into storage
//decreasing the cart length
var cal = JSON.parse(localStorage.getItem('cart'));
if (cal.length != 0) {
cart_n.innerHTML = `[${cal.length}]`;
} else {
cart_n.innerHTML = '';
}

//subtractTotal cart
cal.find(item => {
tempTotal = 0;
tempTotal = item.price * item.id
})
row.innerHTML = tempTotal;
}

});

Answer 1

我在下面的代码中根据我认为您正在努力实现的目标发表了一些评论。

// cart functionality
table.addEventListener("click", event => { 
// we can first check if the element does NOT (!) contain the class
// this means you don't need to wrap the remainder of the code
// as it will return early when the condition isn't met
if(!event.target.classList.contains('fa-close')){
return;
}
let removeItem = event.target;
console.log('df', removeItem);

let id = removeItem.dataset.id;
console.log(id);
table.removeChild(removeItem.parentElement.parentElement);

// should you be setting `obj` to `{}` here? (when it doesn't exist)
// you can't loop over an object the same way you loop over any array
// it looks like you should instead set it to `[]`
let obj = JSON.parse(localStorage.getItem("cart")) || {}; //fetch cart from storage

let items = obj || []; //get the products
for(let i = 0;i < items.length;i++) { //loop over the collection
if (items[i].id === id) { //see if ids match
items.splice(i, 1); //remove item from array
break; //exit loop
}
}
// you didn't modify `obj` in the previous loop, only `items`
// should you instead set this to `items` instead of `obj`?
// if the data exists in localStorage than you would be modifying
// `obj` directly but in the case it doesn't yet exist
// you will be returning a `{}` which cannot be looped over
// the same way you have above
localStorage.setItem("cart", JSON.stringify(obj)); //set item back into storage
// decreasing the cart length
let cal = JSON.parse(localStorage.getItem('cart'));
if(cal.length !== 0){
cart_n.innerHTML = `[${cal.length}]`;
}else{
cart_n.innerHTML = '';
}

// define tempTotal outside of the loop
let tempTotal = 0;

//subtractTotal cart
cal.find(item => {
// increment tempTotal by the price using `+=`
// I removed the `* item.id` as it doesn't make
// sense multiplying the `price` by the `id`
tempTotal += item.price;
// if the item has a `quantity` property
// you would use this code instead of the line above
tempTotal += item.price * item.quantity;
});
row.innerHTML = tempTotal;
});