它应该做的是将文本框中输入的每个数字相加，然后除以 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>
最佳答案
你已经有了一个好的开始。请注意，函数可以传递任意数量的参数，但只能返回一个值。在本例中，您希望 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
}
现在开始执行计算。您不需要所有这些变量，因为这些值是从 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。
关于javascript - 使用 2 个函数和 onchange 事件处理程序计算 5 个数字的平均值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15537419/