javascript - 显示 javascript 函数的返回值

Question

我有一个接受两个参数并返回总和的函数。

现在我正在尝试创建一个包含两个数字的表单。单击按钮时，它应该调用函数 sum 并显示这两个数字的总和。 显示返回值的最佳方式是什么？

到目前为止我的代码:

<form>
        <input type="number" id="firstnumber"/>
        <input type="number" id="secondnumber"/>
        <input type="button" onclick="summa(document.getElementById(firstnumber),document.getElementById(secondnumber))" id="Summa" value="Calculate sum"/>
    </form>
    <div>
        <script type="text/javascript">
document.write(document.getElementById(Summa))
</script>
    </div>

函数:

<script type="text/javascript">
        function summa(number1, number2)
        {
            var sum = number1 + number2;
            return sum;
        }
    </script>

Answer 1

您正在做的事情有几处有点不稳定。首先，您没有将输入中的值 传递给您的函数；您传递的是元素本身。其次，在尝试将值写入文档时，您再次引用了一个元素而不是元素的值。最后，您将尝试将元素(或它们的字符串值，如果您正在检索它们)加在一起，这只会连接在一起成为一个新字符串，而不是执行实际的数学运算。

这是我真正清理和修复您的尝试的方法:

首先，让我们完全摆脱丑陋和突兀的 onclick 事件处理程序(稍后我们将以不同的方式连接事件处理程序):

<input type="button" id="Summa" value="Calculate sum"/>

添加第三个输入以便我们可以显示总和:

<input type="text" id="sumnumber" />

现在让我们在一个地方完成所有 JavaScript 工作，作为结束前的最后一件事 </body>标签。这可以使 HTML 保持干净，不会被内嵌的 JavaScript 弄得乱七八糟，因此您无需在需要进行更改时深入研究它。

    ...
    <script type="text/javascript">

        // Your new summing function definition that takes input values
        function summa(valueOne, valueTwo) {
            // Convert the strings to numbers before doing the math
            return Number(valueOne) + Number(valueTwo);
        }

        // Now let's hold onto some references to the elements in the page
        var sumButton = document.getElementById('Summa');
        var firstNumber = document.getElementById('firstnumber');
        var secondNumber = document.getElementById('secondnumber');
        var sumNumber = document.getElementById('sumnumber');

        // Wire up the event
        sumButton.onclick = function() {
            // Re-use the variables outside of this scope to retrieve 
            var sum = summa(firstNumber.value, secondNumber.value);
            // Update the sum element with the result of the function
            sumNumber.value = sum.toString();
        };

    </script>
</body>

这是一个有效的 jsFiddle Demo 。

注意:如果这是生产代码而不仅仅是教学示例，我还会做其他事情，包括:(1) 数字验证，以及 (2) 锁定输入(最大长度等)和输出(更新到 <span> 或类似的)，以及其他一些小事。