我一直在Vanilla JS中建立购物车。我有一个处理DOM中所有逻辑的接口，以及一个处理数组操作的后端。
我的问题是我在尝试从购物车中删除商品的按钮遇到麻烦。不知道为什么我的代码不会从购物车中删除物品，但是绝对可以在我的测试中使用！
我试图将购物车中的商品链接到一个ID，该ID会随着您对购物车的增加而增加（因此购物车中的每个商品都有其自己的唯一ID），并且我一直尝试通过addEventLister（'单击”），然后调用我的removeItem（）方法，然后在循环外部渲染购物车。不幸的是，它无法正常工作，我感到非常困惑。
数据流cart.js>接口> index.html
cart.js
class Cart {
constructor() {
this.cartArray = []
this.total = 0
}
add(item) {
this.cartArray.push(item)
}
removeItem(item) {
var position = this.cartArray.lastIndexOf(item)
this.cartArray.splice(position, 1)
}
calculateTotal() {
var reducedTotal = this.cartArray.reduce( (previous, current) => {
return this.total = previous + current.price
},0)
return reducedTotal
}
}
interface.js-处理所有DOM组件
function iniitalize () {
var itemList = "<table border='1|1'>";
var shoppingCartList = document.getElementById("shoppingCartList")
var total = document.getElementById("total")
var eachParagraph = document.getElementsByClassName('delete-item')
var cart = new Cart
function showItems() {
for (var i = 0; i < items.length; i++) {
itemList +="<tr>";
itemList += "<td>" + items[i].name + "</td>"
itemList += "<td>" + items[i].category + "</td>"
itemList += "<td> " + items[i].price + "</td>"
itemList += "<td> " + items[i].stock + "</td>"
itemList += ` <td> <button id=${items[i].id}>add to cart</button> </td>`
itemList +="</tr>";
}
itemList += "</table>";
document.getElementById("itemsList").innerHTML = itemList;
}
function renderCart() {
var print = "";
var indexOfItem = 0
cart.cartArray.forEach(function(element, index) {
print += `<p id=${index} class=${index}>` + element.name + element.price
+ `<button id=${indexOfItem}>Remove from cart</button> </p>`
indexOfItem ++
})
return print
}
function renderTotal(){
cart.calculateTotal()
return "£" + cart.total
}
function removeItemButtonFunctionality() {
cart.cartArray.forEach(function(element, index) {
shoppingCartList.addEventListener('click', () => {
cart.removeItem(element)
})
})
renderCart()
}
function addToButtonFunctionality() {
items.forEach( function(element, index) {
document.getElementById(index).addEventListener('click', () => {
cart.add(element)
shoppingCartList.innerHTML = renderCart()
total.innerHTML = renderTotal()
})
})
}
showItems()
addToButtonFunctionality()
removeItemButtonFunctionality()
}
window.addEventListener("DOMContentLoaded", iniitalize)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<h1>Shopping retailer</h1>
</head>
<body>
<div id="itemsList"></div>
<br>
<h3>Total:</h3>
<div id="total">
</div>
<h3>Shopping Cart:</h3>
<p id="shoppingCartList"></p>
<script src="src/items.js"></script>
<script src="src/cart.js"></script>
<script src="./interface.js"></script>
</body>
</html>
最佳答案
好吧，这段代码有很多问题。首先，您可能在某些元素上重复了一些id。每个ID必须是唯一的，否则您将无法使用getElementById获取元素。通常的做法是在id的值前加上一个关键字，该关键字表示元素的确切含义。
其次，当您在removeItemButtonFunctionality函数末尾运行initialize时，还没有呈现remove按钮元素。这些事件处理程序需要在添加项目时动态添加。
第三，这不是问题，但是我可能会更改代码，以便在调用renderCart时，呈现购物车，而不是返回字符串并期望其他函数会为您完成此操作。例如，在removeItemButtonFunctionality上，调用rederCart()时不执行任何操作。renderTotal也是如此。
因此，最后，我将代码更改如下：
function renderCart() {
shoppingCartList.innerHTML = '';
cart.cartArray.forEach(function(element) {
shoppingCartList.innerHTML += `<p id="cart${element.id}">${element.name} ${element.price}<button id="remove${element.id}">Remove from cart</button></p>`;
var removeButton = document.getElementById('remove' + element.id);
removeButton.addEventListener('click', function() {
cart.removeItem(element);
renderCart();
renderTotal();
});
})
}
和
renderTotal：function renderTotal(){
total.innerHTML = "£" + cart.calculateTotal();
}
addToButtonFunctionality将仅调用渲染函数：function addToButtonFunctionality() {
items.forEach( function(element, index) {
document.getElementById(index).addEventListener('click', () => {
cart.add(element)
renderCart();
renderTotal();
})
})
}
在该函数的结尾，您只需调用：
showItems()
addToButtonFunctionality()