javascript total sum of array values
27,873
The problem with this code is that units
is not visible inside Calc_totals. You have a few options:
- make it global (bad option)
- pass it as an argument
Alternatively, you can calculate the sum using reduce
(ECMAScript 5 feature - doesn't work in older browsers)
var sum = units.reduce(function(a, b) { return a + b });
And ES6 version
var sum = units.reduce((a, b) => a + b);
Author by
jmill23
Updated on July 15, 2022Comments
-
jmill23 almost 2 years
Trying to create form to add up values from units array. Can't get function Calc_totals to work.
<script language="JavaScript" type="text/javascript"> function Calc(form) { var drink = new Array() drink [0] = form.drink0.value; drink [1] = form.drink1.value; drink [2] = form.drink2.value; var units = new Array() units [0] = 25; units [1] = 50; units [2] = 75; var number_units = new Array() form.units0.value = form.drink0.value * units[0]; form.units1.value = form.drink1.value * units[1]; form.units2.value = form.drink2.value * units[2]; } function Calc_totals() { var answerValue = 0; for(i=0; i < units.length; i++) { answerValue += Number(units[i]); } form.total_units.value = answerValue; } </script>
I want the function Calc_totals to the total of units and output to form.total_units.value.
HTML:
<form name="calc_form" id="form" method="post"> <table width="370" border="0" bgcolor="#EAEAEA"> <tr> <th width="141"><h2>Drink Type</h2></th><th width="55"><h2>Number drank</h2></th> <th width="84"><h2>Units</h2></th> <th width="84"><h2>Calories</h2></th> </tr> <tr class="table-text"> <td class="right"><p class="table-text">Cider (4.5%)</p> <p class="table-text">1 x 568ml pint</p> <p class="table-text">e.g. Magners, Strongbow</p></td> <td width="55" valign="top"> <p class="table-text"> <input name="drink0" type="text" id="drink0" size="3" maxlength="2" onchange="Calc(form);" /> </p></td> <td width="84" valign="top"><p class="table-text"> <input name="units0" type="text" id="units0" size="4" maxlength="3" /> </p></td> <td width="84" valign="top"><p class="table-text"> <input name="calories0" type="text" id="calories0" size="4" maxlength="3" /> </p></td> </tr> <tr> <td class="right"><p class="table-text">Cider (7.5%)</p> <p class="table-text">1 x 500ml can</p></td> <td width="55" valign="top" class="table-text"><p class="table-text"> <input name="drink1" type="text" id="drink1" size="3" maxlength="2" onchange="Calc(form);" /> </p></td> <td width="84" valign="top"><p class="table-text"> <input name="units1" type="text" id="units1" size="4" maxlength="3" /> </span></p></td> <td width="84" valign="top"><p class="table-text"> <input name="calories1" type="text" id="calories1" size="4" maxlength="3" /> </span></p></td> </tr> <tr> <td class="right"><p class="table-text">Beer (5%)</p> <p class="table-text">1 x 330ml bottle </p> <p class="table-text">e.g. Grolsch, Budweiser</p></td> <td width="55" valign="top" class="table-text"><p class="table-text"> <input name="drink2" type="text" id="drink2" size="3" maxlength="2" onchange="Calc(form);" /> </p></td> <td width="84" valign="top"><p class="table-text"> <input name="units2" type="text" id="units2" size="4" maxlength="3" /> </p></td> <td width="84" valign="top"><p class="table-text"> <input name="calories2" type="text" id="calories2" size="4" maxlength="3" /> </p></td> </tr> <tr> <td><p class="table-text"> </p></td> <td width="55" valign="top"><p class="table-text"></p></td> <td width="84" valign="top"> </td> <td width="84" valign="top"><p class="table-text"></p></td> </tr> <tr> <td><p class="table-text"><strong>Totals per week= </strong></p></td> <td width="55" valign="top"><p class="table-text"> </p></td> <td width="84" valign="top"><p class="table-text"> <input name="total_units" type="text" id="total_units" size="4" maxlength="3" /> units </p></td> <td width="84" valign="top"><p class="table-text"> <input name="total_calories" type="text" id="total" size="4" maxlength="3" /> kcals</p></td> </tr> <tr> <td colspan="2"><INPUT name="reset" value="Reset" TYPE="reset"> </td> <td colspan="3"><input name="Calculate Total" type="button" id="Calculate Total" value="Calculate Total" onclick="Calc_totals();" /></td> </tr> </table> </form>
I want the total of units. Thanks for any help.
-
Lukasz Madon about 11 years@jmill23 the easy way to fix it is to move unit outside the function
var units = [];
-
jmill23 about 11 yearsThere will be too many variables in units array to use this function. Tried the loop but not working.
-
jmill23 about 11 yearshow to I call it from above function and pass it through a loop. Problem seems to be that Calc_totals is not getting values from units?
-
Vishy about 11 yearsI said define it outside Calc() "Not In Calc()" and make it global. Delete the units definition inside Calc(). Calc_totals is unable to see that array because it is Local to Calc().
-
jmill23 about 11 yearsError seems to be with the for loop. var answerValue = 0; for(i=0; i < units.length; i++) { answerValue += Number(units[i].value); } form.total_units.value = answerValue; If I remove the for loop: var answerValue = 0; form.total_units.value = answerValue; I get a vlaue of 0. So it's not getting values from units[i]?
-
Vishy about 11 yearsYes it is not getting value units. As I told you earlier define units array as a global variable instead of local variable.
-
jmill23 about 11 yearsOk, I understand what you mean now, but I don't know how to do that. Can you give example code please? Thanks.
-
jmill23 about 11 yearsThanks @Vishwanath. I've amended function Calc. Problem is I want this to run indpependantly of Calc_totals using onChange the unit values are calculated. Then onSubmit, I want the total sum of units to appear as a value in field form.total_units.
-
jmill23 about 11 yearsOk, i have got the loop working, but it's taking the values from the array, I want the values from the form units0.value, units1.value etc...