Combine multiple number values into a total

Question

Trying to combine the number values from multiple divs.

Sometimes the amount of divs can be 1 and sometimes the amount of divs could be 500.

Trying to find a way to combine all of the number values into an out-put of a "combined total"

function addNums() {
    var sum = ('.item-price' + '.item-price');
}

document.getElementById('total').innerHTML = addNums;

$84
$8
$14
$66
$22
$34
$16
$6
$14

Total:

user_7630984 · Answer

You can grab the numbers from the tags and add to each other with reduce.

Array.from makes a normal array from the DOM array
Then we bring all texts inside the tags, remove the dollar sign and make them a number
And finally, add them together with reduce.

const items = Array.from(document.getElementsByClassName("item-price")).map(item => +item.innerText.substr(1));

document.getElementById('total').innerHTML = items.reduce((a,b) => a + b);

$84
$8
$14
$66
$22
$34
$16
$6
$14

Total:

user_14251221 · Answer

Store the price in a variable (total). Select all the prices with document.querySelectorAll('.item-price'), loop through each with forEach and parse the price with parseInt(element.innerHTML.substring(1), then add this to the total.

function addNums() {
  var total = 0;
  document.querySelectorAll('.item-price').forEach(e => total += parseInt(e.innerHTML.substring(1)));
  return total;
}

document.getElementById('total').innerHTML = addNums();

$84
$8
$14
$66
$22
$34
$16
$6
$14

Total:

user_4398966 · Answer

function addNums() {
 let prices = document.getElementsByClassName('item-price');
 let sum = 0;
 for(let  i = 0; i < prices.length;i++){
     let p = prices[i].innerText
     p = p.substring(1)
     sum = sum+parseInt(p)
  }
  
  document.getElementById('total').innerHTML = sum;
    
}

addNums();

$84
$8
$14
$66
$22
$34
$16
$6
$14

Total:

user_10140124 · Answer

You can change your JS code to this:

function addNums() {
    var sum = Array.from(document.querySelectorAll('.item-price')).reduce((cum,x) => {
     return cum + parseInt(x.innerText.slice(1));
    },0);
    return '$' + sum;
}

document.getElementById('total').innerHTML = addNums();

$84
$8
$14
$66
$22
$34
$16
$6
$14

Total:

Get all .item-price divs using querySelectorAll. This returns a collection not an array, so you convert the collection into an array using Array.from()
reduce is used to convert an array into a single consolidated value after some calculations on each array element starting with an initial value. Here we are starting with initial value 0 and adding the price of each item.
slice() is used to slice arrays/strings, we use slice(1) to get the price value from the first index (ignoring $). That will be a string so we convert using parseInt().
We return the value.

Note: Simply doing var x = addNums means x now holds the function. addNums() executes the function and doing var x = addNums() means x now holds the value returned by addNums on execution.

Combine multiple number values into a total

4 Answers