1

我的代码有什么问题？我创建了 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>
4

5 回答 5

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>
于 2013-09-06T05:21:37.270 回答
0

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

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

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

注意：我不是为了做作业而回答这个问题，因为我怀疑这个问题可能是，但是因为在这个答案中展示一些表单处理方法是值得的，因为这些技术在许多应用程序中都非常有用。其中一些技术是：

  • 以在表单事件处理程序中使用this的方式使用
  • 遍历表单元素，而不是在已经有名称的表单元素上使用容易出错的多个变量（ likevar numberTwo = document.numbers.numTwo.value; var numberThree = document.numbers.numThree.value; ...）或冗余 DOM 操作相关的 s...id
  • ...并在执行上述操作时避免 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)"进行实时、即时计算。

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

这可能不是绝对不是代码的唯一问题（这将有助于使您的代码看起来有一些正在运行或部分运行的页面），但我认为我看到了程序逻辑中的主要漏洞。

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

onchange="var numberTwo=calcAvg(document.numbers.numTwo.value);

但是您之前已将numberTwo等定义为全局变量，并且您的calcAvg函数仅在它们是全局变量时才有效（它不接受任何参数，而仅对全局定义的变量进行操作）。

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

PS 如果您知道如何在您的页面上发布一个 JS Fiddle，以便我们可以更轻松地“摆弄”它。*

于 2013-09-06T05:20:06.660 回答
0

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

检查小提琴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>
于 2013-09-06T05:45:11.383 回答
0

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

            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();
            }
于 2013-09-06T05:23:59.890 回答
0

尝试使用 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;
       }
于 2013-09-06T05:53:00.517 回答