How to calculate discount for each item of an array using reduce()?

Question

I need to calculate 15% discount for each item in an array and the total.

Currently i have the solution for calculating and showing total discount for all items with reduce() method, but how do i calculate the discount for each item separately using reduce()? Is there a way to do that or should i use a different solution?

function getDomNodesBySelector(selector) {
  return Array.from(document.querySelectorAll(selector));
}

document.querySelector('.total__button').addEventListener('click', applyDiscount);

function applyDiscount() {
  let items = getDomNodesBySelector(".price-value");
  let numDiscount = 15;
  let totalValue = items.reduce((acc, cur) => acc + (1 - (numDiscount / 100)) * cur.innerText, 0);
  document.querySelector(".total-price-value").innerText = totalValue;
}



  
    
    
    Корзина заказов
    
    
  
  
  Корзина
  
    
      
      
        Have A Good Time x FA Two Tone куртка
        Цвет: Зеленый/Оранжевый
        Размер: M
        Количество: 1
      
      
        15890 руб.
      
    
    
      
      
        Vans Old Skool кеды
        Цвет: Черный/Белый
        Размер: 43
        Количество: 1
      
      
        6390 руб.
      
    
    
      
      
        Pop DRS Denim Stonewashed джинсы
        Цвет: Голубой
        Размер: S
        Количество: 1
      
      
        11290 руб.
      
    
    
      
      
        By Parra ремень
        Цвет: Мульти
        Размер: S
        Количество: 1
      
      
        8550 руб.
      
    
    
      
      
        Fucking Awesome Drawings 2 Pink доска
        Цвет: Розовый флюросентный
        Размер: Один размер
        Количество: 1
      
      
        4790 руб.
      
    
  
  
    
    
      Итого:
      46910 руб.

user_19140003 · Answer

Something like

function getSingleValue(){

   var single = document.querySelector('.price-value').textContent;
   return single;

}

console.log(getSingleValue())

should give you an array with the individual prices from the html which you will then be able to use

user_2743458 · Answer

While looping through the price items array, using reduce, you are already accessing each item element and calculating the discounted price for each item. So before updating the reduce accumulator update the item value.

Update each item and add to total:

// CHANGE:
// let totalValue = items.reduce((acc, cur) => acc + (1 - (numDiscount / 100)) * cur.innerText, 0);

// TO:
let totalValue = items.reduce((acc, cur) => {
    let itemdisc = (1 - (numDiscount / 100)) * cur.innerText; // calculate item discount
    cur.innerText = itemdisc; // update item
    return acc + itemdisc; // update total
}, 0);

And prevent discount from being applied again:

document.querySelector('.total__button').disabled = true;

Updated script:

function getDomNodesBySelector(selector) {
  return Array.from(document.querySelectorAll(selector));
}

document.querySelector('.total__button').addEventListener('click', applyDiscount);

function applyDiscount() {
  let items = getDomNodesBySelector(".price-value");
  let numDiscount = 15;
  let totalValue = items.reduce((acc, cur) => {
      let itemdisc = (1 - (numDiscount / 100)) * cur.innerText; // calculate item discount
      cur.innerText = itemdisc; // update item
      return acc + itemdisc; // update total
  }, 0);
  document.querySelector(".total-price-value").innerText = totalValue;

  // prevent discount from being applied more than once
  document.querySelector('.total__button').disabled = true;
}

How to calculate discount for each item of an array using reduce()?

2 Answers