Добавление нескольких элементов 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));

Вы также можете посмотреть на currying в JS.