Как добавить несколько объектов в массиве в JavaScript?

Question

Каждый раз, когда я нажимаю кнопку «Добавить в корзину», она обновляет cartarray[].Я хочу добавить новый объект в корзину для каждого клика, чтобы у меня было несколько объектов для каждого элемента корзины.

(function() {
  const cartbtn = document.querySelectorAll(".add_to_cart_button");

  cartbtn.forEach(function(btn) {
    btn.addEventListener("click", function(event) {
      if (event.target.parentElement.classList.contains("add_to_cart_button")) {
        let fullpath = event.target.parentElement.previousElementSibling.children[0].children[0].src;
        const item = {};
        item.img = fullpath;
        let name = event.target.parentElement.previousElementSibling.children[3].children[0].textContent;
        item.name = name;
        let price = event.target.parentElement.previousElementSibling.children[3].children[1].textContent;
        let finalprice = price.slice(1).trim();
        item.price = finalprice;
        const cartarray = [];
        var product = function(name, price, img) {
          this.name = name
          this.price = price
          this.img = img
        };
        cartarray.push(new product(name, finalprice, fullpath));
        console.log(cartarray);

      }
    });
  });
})();

<div class="product-item men">
  <div class="product discount product_filter">
    <div class="product_image">
      <img src="images/product_1.png" alt="">
    </div>
    <div class="favorite favorite_left"></div>
    <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"><span>-$20</span></div>
    <div class="product_info">
      <h6 id="item-name" class="product_name"><a href="single.html">Fujifilm X100T 16 MP Digital Camera (Silver)</a></h6>
      <div class="product_price">$520.00</div>
    </div>
  </div>
  <div class="red_button add_to_cart_button"><a href="#/">add to cart</a></div>
</div>

Answer 1

cartarray должно быть объявлено за пределами addEventListener, чтобы элементы в корзине были постоянными.

Я бы также предложил разместить создание продукта снаружи, хотя техническиэто не обязательно.

В качестве примера ниже приведен пример, в котором цикл for имитирует нажатия кнопок:

const cartarray = [];
const product = function(name, price, img) {
  return {
    name: name,
    price: price,
    img: img
  }
};

for (let x = 1; x < 6; x++) {
  cartarray.push(new product('p' + x, x + '.00', 'path/to/img' + x + 'png'));  
}


console.log(cartarray);

Answer 2

Я оставляю ответ, а не комментарий, потому что у меня все еще нет репутации оставлять комментарий.Предоставьте HTML-код, как сказали мои коллеги, и мы сможем ответить.Я заметил, что что-то «подозрительное» может помешать вашему коду работать, вот эти две строки кода:

const cartbtn = document.querySelectorAll(".add_to_cart_button"); 
if (event.target.parentElement.classList.contains("add_to_cart_button"))

Это может быть '.'в первой строке или отсутствует во второй строке, что останавливает работу вашего кода.Я могу ошибаться, это просто предположение, не видя ваш полный код