Create a new array from values in a loop, then sum all values from new array

Question

I have a form with multiple rows where a user can input numbers and calculate outputs.

I can currently calculate the output of each row - the sub-total. But would like to be able to calculate all sub-totals - the total.

I'm able to log each sub-total to the console, but cannot figure out how to sum those values. Having read some similar questions I reckon I need to create an array of the values and sum those values.

Is this possible using the loop I'm currently using?

Here's what I currently have:

const rows = document.querySelectorAll('.row');
const calculate = document.querySelector('.calculate');
const output = document.querySelector('.output');

// Calculate

function calculateSubTotal() {

  rows.forEach(function(row, index){
    const input1Val = Number(row.querySelector('.input-1').value);
    const input2Val = Number(row.querySelector('.input-2').value);

    const subTotal = input1Val + input2Val;

    console.log(subTotal);
  });

}

calculate.addEventListener('click', calculateSubTotal);

Here's a pen: https://codepen.io/abbasarezoo/pen/WBXjWO?editors=1111

Maheer Ali · Accepted Answer · 2019-05-21 16:24:11Z

1

Declare a variable outside forEach and increase it inside forEach

function calculateSubTotal() {
  let total = 0;
  rows.forEach(function(row, index){
    const input1Val = Number(row.querySelector('.input-1').value);
    const input2Val = Number(row.querySelector('.input-2').value);

    const subTotal = input1Val + input2Val;

    console.log(subTotal);
    total += subTotal 
  });

}

A simplified version of your code using reduce() and map() will be

function calculateSubTotal() {
  let total = 0;
  let subTotals = rows.map(x => +x.querySelector('.input-1').value + +x.querySelector('.input-2').value)
  let total = subTotals.reduce((ac,a) => ac + a,0)
}

answered May 21, 2019 at 16:24

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create a new array from values in a loop, then sum all values from new array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related