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>或类似），以及其他小事。

显示javascript函数的返回值

1 个答案: