用JavaScript为购物车创建一个删除和添加按钮

Question

我正在做一个在初学者JavaScript课程中创建购物车的项目。到目前为止，我已经成功地将商品添加到购物车中，并将其价值乘以一个小计。我失败的地方是我的+和-不起作用，所以我不能加两次idem ?我得到

Uncaught TypeError: cannot set property 'innerHTML' of null

回顾一下，当您试图修改尚未出现在页面上的HTML元素时，通常会发生此错误。解决方案是将JavaScript代码从HTML元素下面的head标签移开。

web开发新手…下面是我的代码。

const products = [{
"id": 1,
"name": "Aloe Vera",
"origin": "Nederländerna",
"description": "Lättskött suckulent med tjocka gröna blad. En av världens äldsta läkeväxter",
"height": "Höjd: 120cm",
"care": "Lättskött suckulent som trivs ljust, men undvik direkt solljus.",
"image": "img/alovera.jpeg",
"price": 100
},
{
"id": 2,
"name": "Citronfikus",
"origin": "Danmark",
"description": "En vacker växt med blanka, små gröna blad.",
"height": "Höjd: 50cm",
"care": "Passar bra i uterummet sommartid.",
"image": "img/citronfikus.jpeg",
"price": 150
},
{
"id": 3,
"name": "Hampa",
"origin": "Jamaica",
"description": "En fin växt med väldigt vackra blad med magiska egenskaper.",
"height": "Höjd: 50-100cm",
"care": "Passar bra i uterummet sommartid, vänt mot öst eller väst.",
"image": "img/hemp.jpg",
"price": 200
}
];
/* This section her renders all the items I've added to the cart, it also uses the id's that my objects have saved in the array that I created. I try to generate this button when rendering an item but it doesn't change the amount of items... I don't know why */
function renderCartItems() {
cartItemsEl.innerHTML = ""; // clear cart element
cart.forEach((item) => {
cartItemsEl.innerHTML += `
<div class="cart-item">
<div class="item-info" onclick="removeItemFromCart(${item.id})">
<img src="${item.image}" alt="${item.name}">
<h4>${item.name}</h4>
</div>
<div class="unit-price">
${item.price}:-
</div>
<div class="units">
<div class="btn minus" onclick="changeNumberOfUnits('minus', ${item.id})">-</div>
<div class="number">${item.numberOfUnits}</div>
<div class="btn plus" onclick="changeNumberOfUnits('plus', ${item.id})">+</div>           
</div>
</div>
`;
});
}
/* this section creates a function that is supposed to update the numberOfUnits with the - and + buttons that are generated from the code above. But when I press them nothing happens, it doesn't change the number of units and is never updated...*/
function changeNumberOfUnits(action, id) {
cart = cart.map((item) => {
let numberOfUnits = item.numberOfUnits;
if (item.id === id) {
if (action === "minus" && numberOfUnits > 1) {
numberOfUnits--;
} else if (action === "plus" && numberOfUnits < 1) {
numberOfUnits++;
}
}
return {
...item,
numberOfUnits,
};
});
updateCart();
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<div class="app-container">
<div class="app-bg">
<div class="left-side"></div>
<div class="right-side"></div>
</div>
<header>
</header>
<div class="products-list">
<div class="products">
<!-- render porducts here -->
</div>
<div class="cart">
<div class="cart-header">
<div class="column1">Vara</div>
<div class="column2">Pris</div>
<div class="column3">Antal</div>
</div>
<div class="cart-items">
<!-- render cart items here -->
</div>
<div class="cart-footer">
<div class="subtotal">
Totalt (0 varor): 0
</div>
<div class="checkout">
Vidare till betalning
</div>
</div>
</div>
</div>

Answer 1

天哪，真烦人!但我找到了解决方案，为了能够增加购物车中的商品数量，我必须检查值是否为>或& lt;然后把实际的数字加起来，所以我是这样解的。

// change number of units for an item
function changeNumberOfUnits(action, id) {
cart = cart.map((item) => {
let numberOfUnits = item.numberOfUnits;
if (item.id === id) {
if (action === 'minus' && numberOfUnits >= numberOfUnits) {
numberOfUnits--;
} else if (action === 'plus' && numberOfUnits <= numberOfUnits) {
numberOfUnits++;
}
}
return {
...item,
numberOfUnits,
};
});
updateCart();