1

これがすべきことは、テキスト ボックスに入力された各数値を合計し、それを 5 で割って平均を計算することです。onchange イベント ハンドラーと 2 つの関数を使用し、その結果を calcAvg 関数に返す必要があります。各テキストにbox は、calcavg() という名前の関数を呼び出す onchange イベント ハンドラーを追加し、ドキュメント オブジェクトを参照することによってその関数にそのテキスト ボックスの値を渡します。performCalc() 関数で、5 つの数値の平均を計算し、その結果を 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>
4

1 に答える 1

1

良いスタートを切りました。関数は任意の数のパラメーターを渡すことができますが、返すことができるのは1つの値のみであることに注意してください。この場合、calcAvgがperformCalcに複数の値を渡す必要があります。

これらを呼び出しの正式なパラメーターとして、または値の配列として含めることで、これを行うことができます。2番目の方法は、任意の数の値を簡単に渡すことができるため、より柔軟性があります。次のように関数を変更できます。

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。

于 2013-03-21T01:42:38.300 に答える