Как сделать счетчик?

Question

[Юрий Иванов]

У меня есть счетчики у карточек
Карточек может быть сколько угодно
при клике я нахожу именно цену той карточки куда кликнули
и затем при клике на + я хочу цену*2
но проблему, что у меня цена первоначальная 500*2 = 1000, и уже следующая итерация будет *2 от тысячи
я понимаю и проблема и что я делаю, но как мне это поправить просто не понимаю, подскажите, пожалуйста...........

let priceSumm = orderCounterPlus.parentNode.parentNode.childNodes[3].innerText.replace(/[^+\d]/g, '');
    let priceNumber = Number(priceSumm);
    orderCounterPlus.parentNode.parentNode.childNodes[3].innerText = String(priceNumber*amountItem + '₽');
  })

https://codepen.io/scrappyjs666/pen/yLpNxXw
вот кодепен, при первом клике цена *2, в следующем уже *2 от предыдущий, помогите разобраться)

Comments

[Stalker_RED]

Покажите html-код карточки

[Юрий Иванов]

Stalker_RED,

`<div class="addItemCard2__item">
        <div class="addItemCard2__item_wrap">
          <img
            class="addItemCard2-item__image"
            src=${(resultImg[i])}
            alt="pizza"
          />
          <div class="addItemCard2__text">
            <div class="addItemCard2-text__title">
              ${(resultName[i])}
            </div>
            <div class="addItemCard2-text__descr">${(resultDescr[i])}</div>
          </div>
        </div>
        <div class="addItemCard2__item_wrap">
          <div class="order-item__sum">
            <button class="order-counter__btn order-counter__plus">
              <img
                src="images/order/Plus__icon.svg"
                alt="icon"
                class="order-counter-plus__image"
              />
            </button>
            <div class="order-counter__number">1</div>
            <button class="order-counter__btn order-counter__minus">
              <img
                src="images/order/Minus__icon.svg"
                alt="icon"
                class="order-counter-minus__image"
              />
            </button>
          </div>
          <div class="order-footer__costs addItemCard2-item__costs">${(resultPrice[i])}</div>
        </div>
    </div>`;

[Александр]

Юрий Иванов, 1. Добавляете id в свою вёрстку:

<div class="addItemCard2__item" id="${ID_VAR_HERE}">...</div>

2. Добавляете id в элементы своей коллекции:

const example = [
  { id: '1', img: 'my-img.jpg', name: 'Item 1', description: 'some desc', price: 1000 },
  { id: '2', img: 'my-img.jpg', name: 'Item 2', description: 'some desc', price: 2000 },
];

3. Добавляете обработку события клика:

const doAction = (wrapper, callback) => {
  const countElement = wrapper.querySelector('.order-counter__number');
  const costElement = wrapper.querySelector('.order-footer__costs');
  const count = parseInt(countElement.textContent);
  const item = example.find(entry => entry.id === wrapper.id); // поменять example на свой массив со всеми элементами

  if (item) {
    callback(item, count, {
      count: countElement,
      cost: costElement
    });
  }
}

const doPlus = (wrapper) => doAction(wrapper, (item, count, elements) => {
  const newCount = count + 1;

  elements.count.textContent = newCount;
  elements.cost.textContent = newCount * item.price;
});

const doMinus = (wrapper) => doAction(wrapper, (item, count, elements) => {
  const newCount = Math.max(1, count - 1);

  elements.count.textContent = newCount;
  elements.cost.textContent = newCount * item.price;
});

window.addEventListener('click', event => {
  const button = event.target.closest('.order-counter__btn');
  if (button) {
    const wrapper = event.target.closest('.addItemCard2__item');
    if (button.classList.contains('order-counter__plus')) {
      doPlus(wrapper);
    } else if (button.classList.contains('order-counter__minus')) {
      doMinus(wrapper);
    }
  }
});

Answer 1

[Саша]

Храните данные в data-атрибутах или переменных.

Оптимизируйте код, текущий слишком громоздкий и возвращайтесь, если по пути не выйдет решить возникшую задачу.