Вычисление применяется только к первому элементу в корзине товаров, как исправить?

Question

введите сюда описание изображения

Класс Shopping:

class Shopping {
    handlerClear() {
        ROOT_SHOPPING.innerHTML = ''
    }

    render() {
        const productsStore = localStorageUtil.getProducts() 
        let htmlCatalog = ''
        let sumCatalog = 0 
        CATALOG.forEach(({
          id,
          name,
          price,
          old_price,
          img
        }) => {
            if (productsStore.indexOf(id) !== -1) {
                htmlCatalog += `

    <div class="cartpage">

      <div class="cart-actions">
        <div class="cartimg">
          <img src="${img}" alt="">
        </div>
        <div class="cart-actions-wish"><img src="/img/wishh.png" alt="">Whishlist</div>
        <div class="cart-actions-compare"><img src="/img/comapatr.png" alt=""> Compare
        </div>
        <div class="cart-actions-remove">
          <img src="/img/remove.png" alt="">Remove
        </div>
      </div>
      <div class="cart-info ">
        <div class="cart-info-name">

          ${name}
        </div>
        <div class="info-cont">

          <div>
            <span class="grey_text">Fram</span>
            <span class="grey_text">Freshness:</span>
          </div>

          <div>
            <span>Tharamis Farm</span>
            <span>1 day old:</span>
          </div>
        </div>
        <div>
          <img src="/img/4star.png" alt="">
        </div>
        <div class="cart-price-cont">
          <div class="cart-price">
            <span class="test-price">${price}  </span>
            <span>${old_price}</span>
            <span id="result_multi">$</span>
          </div>
          <div>
            <div class="price-input">
              <input onchange="multi()" type="number" class="inp_1" id="inp_1" placeholder="1">
            </div>


          </div>
        </div>
      </div>
    </div>
    `;
                sumCatalog += price
            }
        });
        const html = `
    <div class="cart-title">
      <h2>
        Shopping cart
      </h2>
      <d iv class="close">
        <span class="grey_text">
        Close
        </span>
        <div class="shopping__close" onclick="shoppingPage.handlerClear();"></div>
        <img onclick="shoppingPage.handlerClear();" src="/img/close.png" alt="">
      </div>
    </div>


    ${htmlCatalog}
    <div class="summ">
      <h4>Subtotal</h4>
      ${sumCatalog.toLocaleString()}
    </div>
    `;
        ROOT_SHOPPING.innerHTML = html;
    }
}

Использование:

const shoppingPage = new Shopping();

function multi() {
    let multi_1 = document.getElementById('inp_1').value;
    let multi_2 = document.querySelector('.test-price').textContent;
    result = multi_1 * multi_2;
    document.getElementById('result_multi').innerHTML = result;
}

Answer 1

Насколько можно разобраться в Вашем коде, каждый блок с товаром имеет класс cartpage. И расчет происходит при изменении input'a:

<input onchange="multi()" type="number" class="inp_1" id="inp_1" placeholder="1">

Сама функция для расчета:

function multi() {
    let multi_1 = document.getElementById('inp_1').value;
    let multi_2 = document.querySelector('.test-price').textContent;
    let result = multi_1 * multi_2;
    document.getElementById('result_multi').innerHTML = result;
}

Нельзя на странице создавать эл-ты с повторяющимся id!

multi_1, multi_2 - всегда будет брать значение первого input

document.getElementById('result_multi').innerHTML = result; - аналогично, всегда будет записывать значение result в эл-т с id="result_multi"

Выбирать эл-ты для расчета нужно исходя из текущего блока: например, можно в функцию расчета передавать текущий блок с товаром

<input onchange="multi(this.closest('.cartpage'))" 
       type="number" class="inp_1" id="inp_1" placeholder="1">

onchange="multi(this.closest('.cartpage'))" - в параметры функции multi передаём ближайший блок с классом cartpage. И в самой функции ищем нужные данные/эл-ты уже не на странице, а в самом блоке:

function multi(card) {
    let amount = card.querySelector('.inp_1').value;
    let price = card.querySelector('.test-price').textContent;
    let result = amount * price;
    card.querySelector('.total_price').innerHTML = result;
}

Обратите внимание, для эл-тов с id="result_multi" следует добавить класс, например, total_price (как в примере выше) а id удалить.

БЛОГ НА HUSL

Вычисление применяется только к первому элементу в корзине товаров, как исправить?

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