Question

它应该做的是将每个放在文本框中的数字相加，然后将它除以5来计算平均值。我必须使用onchange事件处理程序和2个函数，并将结果返回给calcAvg函数。对每个文本框添加一个onchange事件处理程序，该处理程序调用名为calcavg（）的函数，并通过引用其文档对象将该文本框的值传递给该函数。在performCalc（）函数中计算五个数字的平均值然后将结果返回到calcAvg函数这是我所拥有的：

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

Answer 1

你有个好的开始。请注意，函数可以传递任意数量的参数，但只能返回一个值。在这种情况下，您希望calcAvg将多个值传递给performCalc ..

您可以通过将它们作为正式参数包含在调用中或作为值数组来实现。第二种方法更灵活，因为您可以轻松传递任意数量的值。您可以按如下方式修改您的功能：

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
}

现在为performCalc。从calcAvg传递值时，您不需要所有这些变量。所以这个函数只是计算它给出的平均值并返回值：

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。

使用2个函数和onchange事件处理程序计算5个数字的平均值

1 个答案: