使用2个函数和onchange事件处理程序计算5个数字的平均值 [英] Calculate average of 5 numbers using 2 functions and onchange event handlers
问题描述
它应该做的是将每个放在文本框中的数字相加，然后通过除以5来计算平均值。我必须使用onchange事件处理函数和2个函数，并将结果返回给calcAvg函数。在每个文本框中添加一个onchange事件处理程序，该处理程序调用名为calcavg（）的函数，并通过引用其文档对象将该文本框的值传递给该函数。在performCalc（）函数中计算五个数字的平均值，然后将结果返回给calcAvg函数这就是我所拥有的：
pre $ code >< HTML>
< head>
< title>< / title>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< script type =text / javascript>
函数calcAvg（一，二，三，四，五）{
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}
函数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 =totalfaction =％20>
< p>输入< input type =textvalue =0name =oneonchange =calcAvg（document.totalf.one.value）>< / p>
< p>输入< input type =textvalue =0name =twoonchange =calcAvg（document.totalf.two.value）>< / p>
< p>输入< input type =textvalue =0name =threeonchange =calcAvg（document.totalf.three.value）>< / p>
< p>输入< input type =textvalue =0name =fouronchange =calcAvg（document.totalf.four.value）>< / p>
< p>输入< input type =textvalue =0name =fiveonchange =calcAvg（document.totalf.five.value）>< / p>
< p>结果：< input type =textname =res>< / p>
< / form>
< / body>
< / html>
你有一个好的开始。请注意，函数可以传递任意数量的参数，但只能返回一个值。在这种情况下，您需要calcAvg将多个值传递给performCalc ..
您可以通过将它们作为形式参数包含在调用中，或作为一组值。第二种方法更灵活，因为您可以轻松传递任意数量的值。你可以修改你的函数，如下所示：
函数calcAvg（一，二，三，四，五）{
//注意这些可以使用循环来收集
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;
//此时，您通常会验证从
检索的值//表单并处理任何垃圾（删除它，停止处理，
//请求另一个值等）
//将值传递给performCalc并存储结果
var average = performCalc（[one，two，3，four，5]）;
//现在用结果做一些事情
document.totalf.res.value = average;
//不需要返回语句作为
//函数不需要返回值
//尽管空的return语句是无害的
//返回
}
现在进行performCalc。您不需要所有这些变量，因为值是从calcAvg传递的。所以这个函数只是计算它给出的平均值并返回值：
$ p $函数performCalc（values）{
//不需要任何这些
// 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 sum = 0;
//循环值，注意值是字符串，所以他们
//需要在被添加
之前转换为数字（var i = 0，iLen = values .length; i< iLen; i ++）{
//一元+运算符会将值转化为数值
//在现实生活中，添加
//以避免垃圾输入错误
sum + = + values [i];
}
//您需要转换每个值，这将连接值
//然后将其转换为数字，例如， 1，2，3将变成123而不是6
// var res = parseFloat（1 + 2 + 3 + 4 + 5）;
//你已经将res转换为一个数字（很糟糕，但它是一个数字）
//并且除法将字符串强制转换为数字。
//但你不需要这个
// var calcResult = parseFloat（res / 5）;
//只需返回计算结果
return sum / values.length;
}
HTH。
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>
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.
这篇关于使用2个函数和onchange事件处理程序计算5个数字的平均值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
