Собрать все цены и вывести общую сумму

Question

Есть корзина с товарами, нужно собрать их цены, суммировать и вывести на страницу (так как цену товара можно менять, то использую setInterval):

setInterval(() => {
   const BlockHeaderResponceP = document.querySelector('.block__header__responce_p');
   const cartPageItemTotalPrice = document.querySelectorAll('.cart-page__item__total-price__responce');
   let totalPrice = 0;
   for(var i=0;i<cartPageItemTotalPrice.length;i++){
       totalPrice = totalPrice + Number(cartPageItemTotalPrice[i].textContent);
       console.log(Number(cartPageItemTotalPrice[i].textContent));
       BlockHeaderResponceP.textContent = `${totalPrice}`;
   }
}, 1000);

<div class="cart-page__item">
   <span class="cart-page__link-to-card">
      <img src="assets/img/card-img-wrapper.png" alt="Изображение" class="cart-page__item__img">
   </span>
   <div class="cart-page__item__info">
      <div class="cart-page__item__text">
          <span class="cart-page__item__total-price"><span class="cart-page__item__total-price__responce">76.99</span> руб</span>
      </div>
   </div>
</div> 
<div class="cart-page__item">
   <span class="cart-page__link-to-card">
      <img src="assets/img/card-img-wrapper.png" alt="Изображение" class="cart-page__item__img">
   </span>
   <div class="cart-page__item__info">
      <div class="cart-page__item__text">
          <span class="cart-page__item__total-price"><span class="cart-page__item__total-price__responce">55.99</span> руб</span>
      </div>
   </div>
</div> 

<span class="block__header__price"><span class="block__header__responce_p">439.90</span> руб</span>

Answer 1

Array.reduce() - максимально просто и удобно:

const BlockHeaderResponceP = document.querySelector('.block__header__responce_p');
const cartPageItemTotalPrice = [...document.querySelectorAll('.cart-page__item__total-price__responce')];
setInterval(() => {
  BlockHeaderResponceP.textContent = cartPageItemTotalPrice.reduce((acc, el) => {
    return acc += +el.textContent;
  }, 0);
}, 1000);

<div class="cart-page__item">
  <span class="cart-page__link-to-card">
      <img src="assets/img/card-img-wrapper.png" alt="Изображение" class="cart-page__item__img">
   </span>
  <div class="cart-page__item__info">
    <div class="cart-page__item__text">
      <span class="cart-page__item__total-price"><span class="cart-page__item__total-price__responce">76.99</span> руб</span>
    </div>
  </div>
</div>
<div class="cart-page__item">
  <span class="cart-page__link-to-card">
      <img src="assets/img/card-img-wrapper.png" alt="Изображение" class="cart-page__item__img">
   </span>
  <div class="cart-page__item__info">
    <div class="cart-page__item__text">
      <span class="cart-page__item__total-price"><span class="cart-page__item__total-price__responce">55.99</span> руб</span>
    </div>
  </div>
</div>

<span class="block__header__price"><span class="block__header__responce_p">0.00</span> руб</span>

БЛОГ НА HUSL

Собрать все цены и вывести общую сумму

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