javascript total sum of array values

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">&nbsp;</p></td>
  <td width="55" valign="top"><p class="table-text"></p></td>
  <td width="84" valign="top">&nbsp;</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">&nbsp;</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.

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">&nbsp;</p></td>
  <td width="55" valign="top"><p class="table-text"></p></td>
  <td width="84" valign="top">&nbsp;</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">&nbsp;</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.

Share Improve this question edited Apr 8, 2013 at 9:04 asked Apr 8, 2013 at 8:58 jmill23 732 gold badges2 silver badges7 bronze badges

Please provide the whole code with example input for form. – Manishearth Commented Apr 8, 2013 at 9:00
What answer you want to get...?? – Prasath K Commented Apr 8, 2013 at 9:01
Have you tried Google? I found the answer with google. – errieman Commented Apr 8, 2013 at 9:10
Yes! For last two days...stuck. – jmill23 Commented Apr 8, 2013 at 9:18
You should read this. – thgaskell Commented Apr 8, 2013 at 9:23

Add a comment |

3 Answers 3

Sorted by: Reset to default 19

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);

Define "units" outside the Calc().

<script language="JavaScript" type="text/javascript">
var units = new Array();
function Calc() {...}

=-=-=-=-=-=-=-=-=Edited (Adding Some more code=-=-=-=-=-=-=-=-=-=-=-=

<html>
<head>
<script language="JavaScript" type="text/javascript">
var units = new Array();
function Calc() {
    units [0] = 25;
    units [1] = 50;
    units [2] = 75;
}

function Calc_totals() {
    var answerValue = 0; 

    for(i=0; i < units.length; i++) 
    { 
        answerValue += Number(units[i]);
    } 
    alert(answerValue);
}

function foo()
{
    Calc();
    Calc_totals();
}
</script>
</head>
<body>
<a href="#" onclick="return foo();">Test</a>
 </body>
</html>

Try This For After push in Array Array Of Addition (Sum)

        var globalQtyItemsArray = [];

        var totalQtysAddition = 0;

        globalQtyItemsArray.push(getTrNoQty);

        for (var i = 0; i < globalQtyItemsArray.length; i++) {

          totalQtysAddition += globalQtyItemsArray[i] << 0;  // Addition of Array

        }

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript total sum of array values - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)