Как повторно повесить обработчик на элемент?

Question

Есть простая, тренировочная корзина. Весь код показывать не буду, так как он объёмный. Суть простая: добавляем товар в корзину, у него есть кнопки +/- для добавления и уменьшения количества товара, и есть инпут в котором можно менять количество товара как нажатием на кнопки +/-, так и менять значение вручную с клавиатуры.

С кнопками разобралась, при клике меняю количество и пересчитываю стоимость, но вот с input сложнее.

Код:

const cartCounterChange = () => {

  //находим все елементы в корзине
  const itemList = document.querySelectorAll('.cart__item');

  //проходим циклом по всем елементам 
  itemList.forEach(item => {

    //находим сам инпут
    const input = item.querySelector('[data-counter]');

    //находим обертку инпута
    const inputWrapper = item.querySelector('.product__counter-input');
    
    //на каждый инпут вешаем событие
    input.addEventListener('change', (e) => {

      //перезаписываем значение value (вот здесь я перезаписываю елемент и теряю обработчик. Перезаписываю для того, что-бы в DOM менялось количество товара, а именно атрибут value, так как с его помощью я делаю подсчет количества товаров в корзине)
      inputWrapper.innerHTML = `<input type="text" class="product__counter-quantity" placeholder="1" value="${e.target.value}" data-counter=""></input>`;

      //вызываем функию которая пересчитывает значения общей суммы
      calcCart('.shopping-cart', '.cart__item');
    });

  });
  
};

Получается что в коде я перезаписываю элемент <input> в DOM и обработчик так же теряется. Как мне заново повесить обработчик, после того как я его перезаписала? Или может это нужно делать с помощью делегирования?

Answer 1

Попробуйте вот так. Я проверил после события value инпута в его свойствах, оно изменилось. Вам лишь нужно сохранить потом это изменённое значение.

const inputs = document.querySelectorAll('input');

inputs.forEach(item => {
   item.addEventListener('change', (e) => {
      item.value = e.path[0].value;
      console.log(item.value);
   })
})

<input type="text" value="1" />
<input type="text" value="1" />
<input type="text" value="1" />

БЛОГ НА HUSL

Как повторно повесить обработчик на элемент?

Ответы (1 шт):