javascript - 在购物车中添加多个 onclick 元素

Question

当单击购买该产品的按钮时，我想在购物车对象中添加新元素

我创建了一个对象 p2 和一个“购物车”，其中包含有人想要购买的东西。当单击“add-on-cart”按钮时，应添加与我们单击的数量一样多的 p2 对象

js:

let p2 = new Product("pencil", 3, 0, 10);
let cart = new ShoppingCart();
//addProduct is a function inside cart class
addProduct(product) {
    this.products.push(product);
    this.products.sort();
};
document.getElementById("buttonpen").addEventListener("click", cart.addProduct(p2))

html:

<button type="button" class="btn btn-danger" id="buttonpen">Purchase</button>

预期结果是，如果我单击 4 次按钮，我的阵列产品将充满 4 支笔。发生的情况是，当我打开浏览器时，它会自行推送 1 支笔，并且当我单击按钮时不会继续推送新的笔

Answer 1

您在页面加载后立即看到添加的产品的原因是您在监听器中调用该函数(而不是传递它) .

由于您专注于项目的一小部分，因此很难向您提供有关如何更好地解决问题的详细信息。根据您当前的实现，您可以将监听器更新为以下内容:

document.getElementById("buttonpen").addEventListener("click", () => cart.addProduct(p2));

您还可以研究 JS 中的柯里化(Currying)。