Calculate average of 5 numbers using 2 functions and onchange event handlers

问题

What it is supposed to do is add up each of the numbers put in the text boxes then calculate the average by dividing it by 5. I have to use onchange event handlers and 2 functions and return the result to the calcAvg function.To each text box add an onchange event handler that calls a function named calcavg() and passes the function the value of that text box by referencing its document object. In the performCalc() function calculate the average of the five numbers then return the result to the calcAvg function Here is what I have:

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function calcAvg(one, two, three, four, five){
var one = document.totalf.one.value;
var two = document.totalf.two.value;
var three = document.totalf.three.value;
var four = document.totalf.four.value;
var five = document.totalf.five.value;
return}
function performCalc() {
var one = document.totalf.one.value;
var two = document.totalf.two.value;
var three = document.totalf.three.value;
var four = document.totalf.four.value;
var five = document.totalf.five.value;
var res = parseFloat(one + two + three + four + five);
var calcResult = parseFloat(res/5);
return}
</script>
</head>
<body>
<form name="totalf" action="%20">
<p>Input <input type="text" value="0" name="one"     onchange="calcAvg(document.totalf.one.value)"></p>                                           
<p>Input <input type="text" value="0" name="two"     onchange="calcAvg(document.totalf.two.value)"></p> 
<p>Input <input type="text" value="0" name="three"     onchange="calcAvg(document.totalf.three.value)" ></p> 
<p>Input <input type="text" value="0" name="four"     onchange="calcAvg(document.totalf.four.value)"></p> 
<p>Input <input type="text" value="0" name="five"     onchange="calcAvg(document.totalf.five.value)"></p> 
<p>Result:<input type="text" name="res"></p>

</form>
</body>
</html>

回答1:

You've got a good start. Note that a function can pass any number of parameters, but can only return one value. In this case, you want calcAvg to pass multiple values to performCalc..

You can do that by including them as formal parameters in the call, or as an array of values. The second method is more flexible as you can easily pass any number of values. You can modify your function as follows:

function calcAvg(one, two, three, four, five) {

  // Note that these could be collected using a loop
  var one = document.totalf.one.value;
  var two = document.totalf.two.value;
  var three = document.totalf.three.value;
  var four = document.totalf.four.value;
  var five = document.totalf.five.value;

  // At this point you'd normally validate the values retrieved from
  // the form and deal with any junk (remove it, stop processing, 
  // ask for another value, etc.)

  // pass values to performCalc and store result
  var average = performCalc([one, two, three, four, five]);

  // Now do something with the result
  document.totalf.res.value = average;

  // There's no need for a return statement as
  // the function doesn't need to return a value
  // Though an empty return statement is harmless
  // return
}

Now for performCalc. You don't need all those variables as the values are being passed from calcAvg. So this function just calculcates the average of whatever it's given and returns the value:

function performCalc(values) {

  // No need for any of these
  // var one = document.totalf.one.value;
  // var two = document.totalf.two.value;
  // var three = document.totalf.three.value;
  // var four = document.totalf.four.value;
  // var five = document.totalf.five.value;

  // Initialise sum with a number value
  var sum = 0;

  // Loop over values, note that values are strings so they
  // need to be converted to numbers before being added
  for (var i=0, iLen=values.length; i<iLen; i++) {

    // the unary "+" operator will cooerce the value to a number
    // In real life, the value would be checked before being added
    // to avoid errors from junk input
    sum += +values[i];
  }

  // You need to convert each value, this will concatenate the values
  // then convert that to a number, e.g. 1, 2, 3 will become 123 not 6
  // var res = parseFloat(one + two + three + four + five);

  // You've already converted res to a number (badly, but it's a number)
  // and division will coerce strings to number anyway. 
  // But you don't need this
  // var calcResult = parseFloat(res/5);

  // Just return the result of the calculation
  return sum / values.length;
}

HTH.

来源：https://stackoverflow.com/questions/15537419/calculate-average-of-5-numbers-using-2-functions-and-onchange-event-handlers

标签

javascript

html

function

average