Реализация счетчика на каждом товаре

Question

function renderElements() {
  const fruitsList = document.getElementById("list");
  fruits.forEach((item) => {
    const child = document.createElement("div");
    child.innerHTML += `
    <div class="main__list-item" id=${item.id}>
        <div class="item__img">
            <img src=${item.img} alt="" />
        </div>
        <div class="item__text1">${item.name}</div>
        <div class="item__text2">${item.description}</div>
        <div class="item__price">${item.price} руб.</div
        <<div class="item__btn">
        <button class="item__btn-add" id="add-${item.id}">+</button>
        <button class="item__btn-delete" id="delete-${item.id}">-</button>
        <div class="fruits__count" id="count-${item.id}">0</div>
        </div>
    </div>`;
    fruitsList.appendChild(child);
  });
}
renderElements();

Есть вот такой код, рендерит карточки товаров. Но как мне реализовать счетчик на каждую кнопку + и - ?

Answer 1

Но как мне реализовать счетчик на каждую кнопку + и - ?

Как вариант - использовать делегирование событий https://learn.javascript.ru/event-delegation

document.querySelector('#list').addEventListener('click', e => {
  const o = e.target.closest('.item__btn-add, .item__btn-delete')
  if (!o) return
  const op = o.closest('.main__list-item').querySelector('.fruits__count')
  let v = o.classList.contains('item__btn-add') ? 1 : -1
  v = +op.textContent + v
  if (v < 0) return
  op.textContent = v
  v = [...document.querySelectorAll('.fruits__count')].reduce((s, o) => {
    s += +o.textContent
    return s
  }, 0)
  document.querySelector('#summ').textContent = v
})

#test {
  position: absolute;
  top: 10px;
  right: 200px;
  border: 1px solid;
}

<p id='test'>Корзина <span id='summ'><span></p>
<ul id ='list'>
  <li class='main__list-item'>
    <button class="item__btn-add">+</button>
    <button class="item__btn-delete">-</button>
    <p class="fruits__count">0</p>
  </li>
  <li class='main__list-item'>
    <button class="item__btn-add">+</button>
    <button class="item__btn-delete">-</button>
    <p class="fruits__count">0</p>
  </li>
  <li class='main__list-item'>
    <button class="item__btn-add">+</button>
    <button class="item__btn-delete">-</button>
    <p class="fruits__count">0</p>
  </li>
  <li class='main__list-item'>
    <button class="item__btn-add">+</button>
    <button class="item__btn-delete">-</button>
    <p class="fruits__count">0</p>
  </li>
  <li class='main__list-item'>
    <button class="item__btn-add">+</button>
    <button class="item__btn-delete">-</button>
    <p class="fruits__count">0</p>
  </li>
</ul>

БЛОГ НА HUSL

Реализация счетчика на каждом товаре

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