Итого всех промежуточных итогов от одной функции

Question

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

Мои промежуточные итоги вычисляются из входного значения HTML, установленного на кнопки + и -

, а затем выводятся на промежуточный итог div <div id="itemTotal1" class="subtotal-price">£0.00</div>

Однако, когда я пытаюсь сделать пу sh значения промежуточных итогов для отдельных элементов в массиве, который функция видит только в последнем увеличенном элементе, лучше бы я попробовал какой-нибудь вариант для l oop здесь?

Моя цель - получить .subtotal -цены для вывода в

<div class="summary-total">
  <div class="total-title">Total</div>
  <div class="total-value final-value" data-price="0" id="basket-total">£0.00</div>
</div>

я опубликую рабочий фрагмент моего кода на случай, если я допустил ошибку в своей функции https://jsbin.com/dubociw/edit?html, js, вывод

Answer 1

Да, вы можете сделать все oop, чтобы найти все .subtotal-price элементы и затем суммировать их, чтобы получить общее количество.

    const subtotals = document.querySelectorAll(".subtotal-price");
    let total = 0;
    subtotals.forEach(subtotalItem => {
       const priceString = subtotalItem.innerText.replace("£", "");
       total += parseFloat(priceString);
    });
    const basketTotal = document.querySelector("#basket-total");
    basketTotal.innerHTML = total;

Или другой способ - сохранить массив продуктов в корзине, включая количество и цена (и идентификатор продукта, если необходимо). Затем манипулируйте массивом по количеству изменений и суммируйте итоговую цену. Таким образом, вы можете использовать массив для отображения продукта / цены / количества / промежуточного итога в любом месте, например промежуточного итога в сводке по корзине.