simple addition within array

Question

When the user clicks the button to show all values in the array, how can I get it to add up the total of all 'amounts due'? For example, if one user enters $5, another enters $10 and another enters $25, the total would be displayed as $40.

// Code goes here

var customerarray = [];

function displaydata() {
  var innerTemphtml = ' ';
  for (var i = 0; i < customerarray.length; i++) {

    innerTemphtml += customerarray[i].customerName + " " + customerarray[i].customerID + " " + customerarray[i].AmountDue;
  }
  document.getElementById('output').innerHTML = innerTemphtml;
}

function addtoarray() {
  customerarray.push({
    customerName: document.getElementById('custName').value,
    customerID: document.getElementById('CustID').value,
    AmountDue: document.getElementById('Amount').value
  });
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <span>Customer Name: </span>
<input type="text" id='custName'/><br><br>
<span>Customer ID: </span>
<input type="text" id='CustID'/><br><br>
<span>Amount: </span>
<input type="text" id='Amount'/> <br><br>
<button onClick="addtoarray();" class="button" type = "button">add to array</button>
<button onClick="displaydata()" class="button" type = "button"> Display data</button>
<p id="output"></p>
  </body>

</html>

Gauri Bhosle · Accepted Answer · 2017-04-28 06:21:13Z

I have changed your code as per your requirement as shown below.Hopefully it will solve your problem

// Code goes here

var customerarray = [];

function displaydata() {
var total=0;
  var innerTemphtml = ' ';
  for (var i = 0; i < customerarray.length; i++) {

    innerTemphtml += customerarray[i].customerName + " " + customerarray[i].customerID + " " + customerarray[i].AmountDue+"<br/>";
    total+=parseInt(customerarray[i].AmountDue);
  }
  document.getElementById('output').innerHTML ="User Input Data <br/>" +innerTemphtml;
    document.getElementById('total').innerHTML = "Grand Total = "+total;

}

function addtoarray() {
  customerarray.push({
    customerName: document.getElementById('custName').value,
    customerID: document.getElementById('CustID').value,
    AmountDue: document.getElementById('Amount').value
  });
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <span>Customer Name: </span>
<input type="text" id='custName'/><br><br>
<span>Customer ID: </span>
<input type="text" id='CustID'/><br><br>
<span>Amount: </span>
<input type="text" id='Amount'/> <br><br>
<button onClick="addtoarray();" class="button" type = "button">add to array</button>
<button onClick="displaydata()" class="button" type = "button"> Display data</button>
<p id="output"></p>
<p id="total"></p>

  </body>

</html>

Jins Peter · Accepted Answer · 2017-04-28 06:17:48Z

There are mutliple things you have to look. I have added a display due() for you. And here is my js fiddle https://jsfiddle.net/jinspeter/1qxo50uz/
You have to user a number field for Amount. And also addding the amount has to parsed to Int to reject string.

  <body>
       <span>Customer Name: </span>
    <input type="text" id='custName'/><br><br>
    <span>Customer ID: </span>
    <input type="text" id='CustID'/><br><br>
    <span>Amount: </span>
    <input type="number" id='Amount'/> <br><br>
    <button onClick="addtoarray();" class="button" type = "button">add to array</button>
    <button onClick="displaydata()" class="button" type = "button"> Display data</button>
    <button onClick="displayTotalDue()" class="button" type = "button"> Display Due</button>
    <p id="output"></p>

      </body>

var customerarray = [];

function displaydata() {
  var innerTemphtml = ' ';
  for (var i = 0; i < customerarray.length; i++) {

    innerTemphtml += customerarray[i].customerName + " " + customerarray[i].customerID + " " + customerarray[i].AmountDue;
  }
  document.getElementById('output').innerHTML = innerTemphtml;
}
function displayTotalDue(){
 var total =0;
    customerarray.forEach(function(item){
   total = total + item.AmountDue
  });
  var innerTemphtml = 'totalDue=' + total;
  document.getElementById('output').innerHTML = innerTemphtml;
}
function addtoarray() {
  customerarray.push({
    customerName: document.getElementById('custName').value,
    customerID: document.getElementById('CustID').value,
    AmountDue: parseInt(document.getElementById('Amount').value)
  });
  console.log(customerarray);
}

Teocci · Accepted Answer · 2017-04-28 07:13:17Z

I try to fix your code. To make it more easy to read. I put the displaydata() method inside of the addtoarray() method, so you can see the results after adding an element in the customers array. Also, I replaced the for with a forEach and added a new div for the total.

I create a node that is a p tag, which will contain the name, id and amount. This tag then will be added to the outputLabel for each element in the array. You can optimize this by just adding the additional node and not running the entire array to print the output.

// Code goes here

var customers = [];
var outputLabel = document.getElementById('output');
var totalLabel = document.getElementById('total');
var total = 0;

outputLabel.innerHTML = '<p>Customers</p>';
totalLabel.innerHTML = 'Total:  0';
function displaydata() {
  outputLabel.innerHTML = '<p>Customers</p>';;
  total = 0;
  customers.forEach(function(customer) {
    var node = document.createElement('p');
    node.innerHTML = customer.customerName + ', ' +
      customer.customerID + ', ' +
      customer.AmountDue;
    total += parseInt(customer.AmountDue);
    outputLabel.appendChild(node);
  });
  totalLabel.innerHTML = 'Total: ' + total;
}

function addtoarray() {
  customers.push({
    customerName: document.getElementById('custName').value,
    customerID: document.getElementById('CustID').value,
    AmountDue: document.getElementById('Amount').value
  });
  displaydata();
}

<span>Customer Name: </span>
<input type="text" id='custName' /><br><br>
<span>Customer ID: </span>
<input type="text" id='CustID' /><br><br>
<span>Amount: </span>
<input type="text" id='Amount' /> <br><br>
<button onClick="addtoarray();" class="button" type="button">Add to array</button>
<div id="output"></div>
<div id="total"></div>

Optimized version: for this version I moved the node (p tag) to the addtoarray() method and I capture the data from the inputs. Then I calculate the total. With this two values a call the displaydata(). This method save time running the array each time you want to print the added element.

// Code goes here

var customers = [];
var outputLabel = document.getElementById('output');
var totalLabel = document.getElementById('total');
var total = 0;

outputLabel.innerHTML = '<p>Customers</p>';
totalLabel.innerHTML = 'Total:  0';

function displaydata(node, total) {
  outputLabel.appendChild(node);
  totalLabel.innerHTML = 'Total: ' + total;
}

function addtoarray() {
  var customerName = document.getElementById('custName').value;
  var customerID = document.getElementById('CustID').value;
  var amountDue = document.getElementById('Amount').value;
  customers.push({
    customerName: customerName,
    customerID: customerID,
    amountDue: amountDue
  });
  var node = document.createElement('p');
  node.innerHTML = customerName + ', ' + customerID + ', ' + amountDue;
  total += parseInt(amountDue);
  displaydata(node, total);
}

<span>Customer Name: </span>
<input type="text" id='custName' /><br><br>
<span>Customer ID: </span>
<input type="text" id='CustID' /><br><br>
<span>Amount: </span>
<input type="text" id='Amount' /> <br><br>
<button onClick="addtoarray();" class="button" type="button">Add to array</button>
<div id="output"></div>
<div id="total"></div>

guest271314 · Accepted Answer · 2017-04-28 13:55:45Z

0

Set "AmountDue" property of object to number instead of string at .push() call

Number(document.getElementById('Amount').value)

use Array.prototype.reduce() to add two elements of array at a time, return sum

let dues = customerarray.reduce((a, {AmountDue:b}) => a + b, 0);

edited Apr 28, 2017 at 13:55

answered Apr 28, 2017 at 6:14

guest271314

1

2 Comments

guest271314 Over a year ago

.value should be stored as number to avoid casting string to number which can lead to NaN.

customerarray.push({     customerName: document.getElementById('custName').value,     customerID: document.getElementById('CustID').value,     AmountDue: Number(document.getElementById('Amount').value)   });

, let dues = customerarray.reduce(({AmountDue:a}, {AmountDue:b}) => a + b);

LetterEh Over a year ago

That reduce function is going to behave very, very poorly if there are 0 or 1 entries. You'd be better served putting a map in front, and adding an initial value to the reduce.

Collectives™ on Stack Overflow

simple addition within array

4 Answers 4

Comments

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Related