为什么这段代码会重复？答案

【问题标题】：Why does this code repeat?为什么这段代码会重复？
【发布时间】：2015-11-01 00:02:27
【问题描述】：

这是我为课堂作业编写的代码。作业内容如下：

“构建一个将启动程序的函数。请将其命名为 main()。从 main() 函数调用一个名为 getValue() 的函数。 getValue() 函数将从用户那里获取一个数字，该数字将用于下一步。同样从 main() 函数调用一个名为 getSquareRoot() 的函数。 getSquareRoot() 函数将获取用户在 getValue() 函数中收到的数字的平方根。确保以易于阅读的语句向用户显示结果，包括原始数字和数字的平方根。

顺便说一句，粗体包含在原版中。

这是我的代码它可以工作，除了不知何故函数被调用两次，结果被显示两次，第二次迭代将 userInput 的值分配为 0。我似乎无法确定“循环”在哪里被触发（这里是初学者）。任何帮助将不胜感激；我知道我在盯着它看，但它完全躲开了我。

<html lang="en">

<head>
<title>Project 3 Part A</title>

    <meta charset="utf-8">      

    <script>

        function main()
        {

            var msg1="";
            var msg2="";                
            var userInput = "";

            getValue(userInput);
            getSquareRoot(userInput);

        }

        function getValue(userInput)
        {

            var userInput = document.getElementById("userNumber").value;
            return getSquareRoot(userInput);

        }

        function getSquareRoot(userInput)           
        {           

            squareRoot = Math.sqrt(userInput);  
            var msg1 = "Your original number was " + userInput + ".";   
            var msg2 = "The square root of " + userInput + " is " + squareRoot + ".";   
            document.getElementById("original").innerHTML += msg1;
            document.getElementById("results").innerHTML += msg2;

        }




    </script>

</head>

<body>

        <br>

    <input type="button" id="userInputButton" onclick="javascript:main();" value="Square root input value: "/>          

    <input type="text" id="userNumber"> 

    </div>

    <div id="original">

    </div>

    <div id="results">

    </div>                      

</body>

在此处输入代码

【问题讨论】：

getSquareRoot 正在从 main 和 getValue 调用。从任何一个中删除，一切都很好
getValue 应该没有参数，您需要将其分配给 main 中的变量，还要在 main 中执行所有输出，它可能会像现在这样工作，但通常不是这样。

标签： javascript function parameters arguments

【解决方案1】：

您需要记住，每个功能最好只有一个目的。这里的“getSquaredRoot”函数既负责计算根，也负责输出结果供用户查看。

另外，正如 Lucky Chingi 所说，您调用了两次 getSquaredRoot。

       function main()
    {
        var userInput = getValue();        
        var squaredRoot = getSquareRoot(userInput);

        var msg1 = "Your original number was " + userInput + ".";   
        var msg2 = "The square root of " + userInput + " is " + squareRoot + ".";   
        document.getElementById("original").innerHTML += msg1;
        document.getElementById("results").innerHTML += msg2;

    }

    function getValue()
    {
        return document.getElementById("userNumber").value;
    }

    function getSquareRoot(userInput)           
    {           
        return Math.sqrt(userInput);  
    }

注意它现在是如何在逻辑上分离的。

【讨论】：

啊哈！我在做作业时想知道我是否也应该调用 result() 函数，但没有，因为作业没有明确说我可以这样做并且我自己是一个逻辑结。而且，记住一个函数应该意味着“一个函数”会很有帮助，natch。谢谢！