Question

我的代码出了什么问题？我创建了6个文本框。前五个框用于用户想要的任何数字，最后一个框应该显示数字的平均值。我非常感谢任何帮助！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/DTD/xhtml1.0-transitional.dtd"

<html xmlns="http://www.w3.org/1999/xhtml"
    <head>
        <title>Calc Average</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        /* <![CDATA[ */
            var numberOne= 0;
            var numberTwo = 0;
            var numberThree = 0;
            var numberFour = 0;
            var numberFive = 0;
            var calcResult = 0;

            function calcAvg() {
                performCalc(numberOne, numberTwo, numberThree, numberFour, numberFive);
                return calcResult;
                calcResult = document.numbers.averageResult.value;
            }

            function performCalc() {
                calcResult = parseInt(numberOne + numberTwo + numberThree + numberFour + numberFive) / 5;
                return calcAvg();
            }

        /* ]]> */
        </script>
    </head>
    <body>
        <form action="" name="numbers">
            <table>
                <tr>
                    <td>Number One</td>
                    <td>
                        <input type="text" 
                            name="numOne" value="0" size="5"
                            onchange="var numberOne=calcAvg(document.numbers.numOne.value);" /></td>
                </tr>
                <tr>            
                    <td>Number Two</td>
                    <td>
                        <input type="text"
                            name="numTwo" value="0" size="5"
                            onchange="var numberTwo=calcAvg(document.numbers.numTwo.value);" /></td>
                </tr>
                <tr>
                    <td>Number Three</td>
                    <td>
                        <input type="text"
                            name="numThree" value="0" size="5"
                            onchange="var numberThree=calcAvg(document.numbers.numThree.value);" /></td>
                </tr>       
                <tr>
                    <td>Number Four</td>
                    <td>
                        <input type="text"
                            name="numFour" value="0" size="5"
                            onchange="var numberThree=calcAvg(document.numbers.numFour.value);" /></td>
                </tr>
                <tr>
                    <td>Number Five</td>
                    <td>
                        <input type="text"
                            name="numFive" value="0" size="5"
                            onchange="var numberFour=calcAvg(document.numbers.numFive.value);" /></td>
                </tr>
                <tr>
                    <td>Average of Five Numbers</td>
                    <td>
                        <input type="text"
                            name="averageResult" value="0" size="5"
                            onchange="calcAvg()" /></td>
                </tr>
            </table>
    </body>
</html>

Answer 1

您以递归方式调用calcAvg。

onchange调用“calcAvg”然后calcAvg调用performCalc然后performCalc调用calcAvg等等。

以下代码应该适合您：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/DTD/xhtml1.0-transitional.dtd"

<html xmlns="http://www.w3.org/1999/xhtml"
    <head>
        <title>Calc Average</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <form action="" name="numbers">
            <table>
                <tr>
                    <td>Number One</td>
                    <td>
                        <input type="text" 
                            name="numOne" value="0" size="5"
                            onchange="calcAvg();" /></td>
                </tr>
                <tr>            
                    <td>Number Two</td>
                    <td>
                        <input type="text"
                            name="numTwo" value="0" size="5"
                            onchange="calcAvg();" /></td>
                </tr>
                <tr>
                    <td>Number Three</td>
                    <td>
                        <input type="text"
                            name="numThree" value="0" size="5"
                            onchange="calcAvg();" /></td>
                </tr>       
                <tr>
                    <td>Number Four</td>
                    <td>
                        <input type="text"
                            name="numFour" value="0" size="5"
                            onchange="calcAvg();" /></td>
                </tr>
                <tr>
                    <td>Number Five</td>
                    <td>
                        <input type="text"
                            name="numFive" value="0" size="5"
                            onchange="calcAvg();" /></td>
                </tr>
                <tr>
                    <td>Average of Five Numbers</td>
                    <td>
                        <input type="text" name="averageResult" value="0" size="5" /></td>
                </tr>
            </table>
    </body>
            <script type="text/javascript">
        /* <![CDATA[ */

            function calcAvg() {
              var numberOne= document.numbers.numOne.value;
              var numberTwo = document.numbers.numTwo.value;
              var numberThree = document.numbers.numThree.value;
              var numberFour = document.numbers.numFour.value;
              var numberFive = document.numbers.numFive.value;
              var calcResult = 0;
                calcResult = (parseInt(numberOne) + parseInt(numberTwo) + parseInt(numberThree) + parseInt(numberFour) + parseInt(numberFive)) / 5;
                document.numbers.averageResult.value = calcResult;
            }

        /* ]]> */
        </script>

</html>

Answer 2

更新：JS Fiddle链接，用于工作，极其简化的代码使用   单个函数，没有外部变量：

http://jsfiddle.net/cookies/kZZeY/

当您更改任何方框中的数字时，平均值会更新   当你输入。

注意：正如我所怀疑的那样，我不是为了完成家庭作业而回答这个问题   这个问题可能是，但因为显示某种形式是值得的   在这个答案中处理方法因为这些技术非常普遍   在许多应用中的用处。其中一些技术是：


在表单事件处理程序中使用this的方式

迭代表单元素，而不是使用容易出错的多个变量（，如var numberTwo = document.numbers.numTwo.value; var numberThree = document.numbers.numThree.value; ... ）或冗余的DOM操作相关的id s已经有名称的表单元素...

...并在执行上述操作时避免使用JavaScript特性

避免使用非数字数据

使用onkeyup照亮

避免像零除零这样的潜在数学陷阱

我对你的代码的原始答案就在这个答案的最后，因为我强烈建议你完全重写你的函数，使其更简单，更少冗余，并使用DOM的一些功能，例如：

function calcAvg(elem) {
    var n = 0, sum = 0, e = elem.form.elements, k;
    for (k in e) {
        if ((''+e[k].name).substring(0, 3) == 'num') {
             sum += (e[k].value-0) || 0, n++;
        }
    }
    if (n)
        elem.form.averageResult.value = sum/n;
}

您要触发计算的每个字段都应该具有处理程序onchange="calcAvg(this)"，甚至更好，onkeyup="calcAvg(this)"用于在您键入时进行实时，即时计算。

作为旁注，您不需要使用此代码的任何其他变量 - 只需要您希望与平均过程相关联的每个字段中的事件处理程序，以及以{开头的数字字段的命名格式{1}}作为他们名字的前三个字母。此函数的作用是在包含触发事件的元素的表单中以num开头的所有字段中添加和平均所有值，并自动忽略非数字值以及其他安全功能，如避免除以零和其他一些奇怪的浏览器和特定于版本的行为，超出了本讨论的范围。

这个~~可能不是~~绝对不是代码的唯一问题（它可能有助于看起来某些运行或部分运行的代码页面），但我想我看到了你的主要漏洞程序的逻辑。

在每个文本输入字段中，您都有类似这样的内容（每个事件处理程序的局部变量在事件结束后完全消失）：

num

然而您之前已将onchange="var numberTwo=calcAvg(document.numbers.numTwo.value);等定义为全局变量，并且您的numberTwo函数仅在它们是全局变量时才起作用（它不接受任何参数，而只是对全局定义的变量进行操作）。

删除每个事件处理程序中的“var”前缀，看看你的程序是否有效。

P.S。如果你知道如何做到这一点，也可以在你的页面上发布一个JS Fiddle，以便我们可以更轻松地“摆弄”它。*

Answer 3

除非我们使用数字，否则它会进行连接..

            function calcAvg() {
                performCalc(numberOne, numberTwo, numberThree, numberFour, numberFive);
                return calcResult;
                calcResult = document.numbers.averageResult.value;
            }

            function performCalc(parameters) {
                calcResult = parseInt(Number(numberOne) + Number(numberTwo) + Number(numberThree) + Number(numberFour) + Number(numberFive)) / 5;
                return calcResult();
            }

Answer 4

你可以尝试这个，实时计算

检查小提琴http://jsfiddle.net/5KgPC/1/

<html xmlns="http://www.w3.org/1999/xhtml"
    <head>
        <title>Calc Average</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        /* <![CDATA[ */

            function performCalc() {

                var sum=0;
                var ele = document.getElementsByTagName('input');
                for(var i=0;i<ele.length;i++)
                { 
                   if(ele[i].id !='output')
                   sum+= parseInt(ele[i].value);
                }

                document.getElementById('output').value=(sum/(ele.length-1));
            }

        /* ]]> */
        </script>
    </head>
    <body>
        <form action="" name="numbers">
            <table>
                <tr>
                    <td>Number One</td>
                    <td>
                        <input type="text" name="numOne" value="0" size="5" onblur="performCalc(this)"/></td>
                </tr>
                <tr>            
                    <td>Number Two</td>
                    <td>
                        <input type="text" name="numTwo" value="0" size="5" onblur="performCalc(this)"/></td>

                </tr>
                <tr>
                    <td>Number Three</td>
                    <td>
                        <input type="text" name="numThree" value="0" size="5" onblur="performCalc(this)"/></td>

                </tr>       
                <tr>
                    <td>Number Four</td>
                    <td>
                        <input type="text" name="numFour" value="0" size="5" onblur="performCalc(this)"/></td>

                </tr>
                <tr>
                    <td>Number Five</td>
                    <td>
                        <input type="text" name="numFive" value="0" size="5" onblur="performCalc(this)"/></td>

                </tr>
                <tr>
                    <td>Average of Five Numbers</td>
                    <td>
                        <input type="text" id="output" name="averageResult" value="0" size="5" onfocus="this.blur();"/></td>
                </tr>
            </table>
    </body>
</html>

Answer 5

尝试使用Adarsh对html的更改。这适用于较新的浏览器。

        function calcAvg() {
          var calcResult = 0;
          someArray = [
             document.numbers.numOne.value,
             document.numbers.numTwo.value,
             document.numbers.numThree.value,
             document.numbers.numFour.value,
             document.numbers.numFive.value
          ]
            calcResult = SomeArray.reduce(function(x,y){return x+y;});
            document.numbers.averageResult.value = calcResult;
       }

JScript代码不会平均数字

5 个答案: