Есть ли исправление ошибки счетчика чисел при использовании vanilla javascript

Question

• Я сделал счетчик количества товаров для электронной коммерции, который должен увеличивать и уменьшать количество на 1, и это работает, только если элементы существуют в dom без добавления javascript

• , но когда я нажимаю кнопку «Получить», чтобы добавить с javascript, последний добавленный элемент увеличивается или уменьшается только на единицу.

вот код:

class Cart {

  static global() {
    Cart.getBtn = document.getElementById('get');
    Cart.main = document.getElementsByTagName('main')[0];
    Cart.min = 1;
  }

  constructor(num) {
    this.num = num;
  }

  static insertEl() {
    const div = document.createElement('div');
    div.innerHTML = `
        <br>
        <div>
            <button type="button" class="minus">-</button>
            <input type="number" min="1" max="20" value="1">
            <button type="button" class="plus">+</button>
        </div>
        `;
    Cart.main.appendChild(div);
  }

  static plusFunc() {
    // plus btn
    let plus = document.querySelectorAll('.plus');
    plus.forEach(function(btn) {
      btn.addEventListener('click', function(e) {
        let input = e.target.previousElementSibling;
        let max = Number(input.getAttribute('max'));
        let num1 = new Cart(Number(input.value));

        if (num1.num >= Cart.min) {
          num1.num += 1;
        }
        if (num1.num >= max) {
          num1.num = max;
        }

        input.value = num1.num;

      });
    });
  }

  static minusFunc() {
    // minus btn
    let minus = document.querySelectorAll('.minus');
    minus.forEach(function(btn) {
      btn.addEventListener('click', function(e) {
        let input = e.target.nextElementSibling;
        let max = Number(input.getAttribute('max'));
        let num1 = new Cart(Number(input.value));

        if (num1.num <= max) {
          num1.num -= 1;
        }
        if (num1.num <= Cart.min) {
          num1.num = Cart.min;
        }

        input.value = num1.num;

      });
    });
  }

}
Cart.global();

// events
Cart.getBtn.addEventListener('click', function() {
  Cart.insertEl();
  Cart.plusFunc();
  Cart.minusFunc();
});

<button type="button" id="get">get</button>
<main></main>

Answer 1

Вы добавляете новый плюс и новый минус слушатель к каждому элементу каждый раз, когда добавляется новый элемент. Вместо plusFunc и minusFunc добавьте только что созданный элемент:

class Cart {

  static global() {
    Cart.getBtn = document.getElementById('get');
    Cart.main = document.getElementsByTagName('main')[0];
    Cart.min = 1;
  }

  constructor(num) {
    this.num = num;
  }

  static insertEl() {
    const div = document.createElement('div');
    div.innerHTML = `
        <br>
        <div>
            <button type="button" class="minus">-</button>
            <input type="number" min="1" max="20" value="1">
            <button type="button" class="plus">+</button>
        </div>
        `;
    Cart.main.appendChild(div);
    return div;
  }

  static plusFunc(btn) {
    btn.addEventListener('click', function(e) {
      let input = e.target.previousElementSibling;
      let max = Number(input.getAttribute('max'));
      let num1 = new Cart(Number(input.value));

      if (num1.num >= Cart.min) {
        num1.num += 1;
      }
      if (num1.num >= max) {
        num1.num = max;
      }

      input.value = num1.num;

    });
  }

  static minusFunc(btn) {
    btn.addEventListener('click', function(e) {
      let input = e.target.nextElementSibling;
      let max = Number(input.getAttribute('max'));
      let num1 = new Cart(Number(input.value));

      if (num1.num <= max) {
        num1.num -= 1;
      }
      if (num1.num <= Cart.min) {
        num1.num = Cart.min;
      }

      input.value = num1.num;

    });
  }

}
Cart.global();

// events
Cart.getBtn.addEventListener('click', function() {
  const div = Cart.insertEl();
  const [minus, plus] = div.querySelectorAll('button');
  Cart.plusFunc(plus);
  Cart.minusFunc(minus);
});

<button type="button" id="get">get</button>
<main></main>

Но это довольно странная установка - зачем иметь класс, у которого в основном нет ничего, кроме методов stati c? Вместо этого рассмотрим простой объект:

const Cart = {
  getBtn: document.getElementById('get'),
  main: document.querySelector('main'),
  min: 1,
  max: 20,
  insertEl() {
    const div = document.createElement('div');
    div.innerHTML = `
      <button type="button" class="minus">-</button>
      <input type="number" min="1" max="20" value="1">
      <button type="button" class="plus">+</button>
    `;
    this.main.insertAdjacentHTML('beforeend', '<br>');
    this.main.appendChild(div);
    return div;
  }
}
Cart.getBtn.addEventListener('click', function() {
  const div = Cart.insertEl();
  const [minus, input, plus] = div.children;
  minus.addEventListener('click', () => input.value = Math.max(Cart.min, input.value - 1));
  plus.addEventListener('click', () => input.value = Math.min(Cart.max, Number(input.value) + 1));
});

<button type="button" id="get">get</button>
<main></main>