Увеличение стоимости товара от количества

Question

Простите возможно за нубский вопрос, но я нуб (ага, да). У меня на сайте есть корзина, реализованная на JS. В карточке товара есть счётчик его количества (который можно изменять, хочет пользователь больше или меньше), а также цена за одну единицу товара.

Вопрос: Как при нажатии на кнопки "+" или "-" менять стоимость товара?

Пример: Товар стоит 100 -> нажали на кнопку "+" -> товар стоит 200 -> нажали на кнопку "-" -> товар стоит 100 -> нажали дважды на кнопку "+" -> товар стоит 300 и т.д.

Моя реализация следующая:

let plus = document.querySelectorAll(".plus")
    let minus = document.querySelectorAll(".minus")

    minus.forEach((elem, index1) => {
        elem.addEventListener("click", () => {
            if (elem.nextElementSibling.textContent > 1) {
                elem.nextElementSibling.innerHTML = Number(elem.nextElementSibling.textContent) - 1
            }
            document.querySelectorAll(".pricePerItem").forEach((elem2, index2) => {
                if(index1 == index2) {
                    elem2.textContent = Number(elem2.textContent) * (Number(elem.nextElementSibling.textContent))
                }
            })
        })
    })

    plus.forEach((elem, index1) => {
        elem.addEventListener("click", () => {
            if (elem.previousElementSibling.textContent < 9) {
                elem.previousElementSibling.innerHTML = Number(elem.previousElementSibling.textContent) + 1
            }
            document.querySelectorAll(".pricePerItem").forEach((elem2, index2) => {
                if(index1 == index2) {
                    elem2.textContent = Number(elem2.textContent) * (Number(elem.previousElementSibling.textContent))
                }
            })
        })
    })

Здесь вообще не работает минус (либо 0, либо не меняется), а плюс работает, но не так как нужно. Он цену перемножает новую, а не старую. Я так понимаю мне нужно сохранять как-то куда-то старую цену к каждому товару и от неё считать. Но как это сделать не особо понимаю.

Помогите пожалуйста :)

Картинка карточки:

Answer 1

Я думаю вы сможете довести до того состояния, что вам нужно.

const products = document.querySelector('.products');

products.addEventListener('click', ({target}) =>
{
  const product = target.closest('.product');
  const total   = product.querySelector('.product__totalPrice span');
  const countEl = product.querySelector('.counter__count');
  let   count   = parseInt(countEl.textContent);
  
  if (target.classList.contains('counter__decrement'))
  {
    if (count > 1)
    {
      count--;
    }
  }
  else if (target.classList.contains('counter__increment'))
  {
    if (count < 9)
    {
      count++;
    }
  }
  
  countEl.textContent = count;
  total.textContent   = parseInt(product.dataset.price) * count;
});

body
{
  color: #ACACAC;
  background-color: #121212;
}

.products
{
  display: flex;
  gap: 20px;
}

.product
{
  border: 1px solid #484848;
  padding: 10px;
}

.counter
{
  display: flex;
  gap: 10px;
}

<div class="products">
  <div class="product" data-price="110">
    <div class="counter">
      <button class="counter__decrement">-</button>
      <div class="counter__count">0</div>
      <button class="counter__increment">+</button>
    </div>

    <div class="product__totalPrice"><span>0</span> р.</div>
  </div>

  <div class="product" data-price="110">
    <div class="counter">
      <button class="counter__decrement">-</button>
      <div class="counter__count">0</div>
      <button class="counter__increment">+</button>
    </div>

    <div class="product__totalPrice"><span>0</span> р.</div>
  </div>
</div>

БЛОГ НА HUSL

Увеличение стоимости товара от количества

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