Question

要学习和学习JavaScript，我试着做一个计算器，作为开始我尝试通过2输入进行求和操作。但不知何故有一个问题，我无法看到。你能救我吗？

以下是代码：

<html> 
    <body>
        <h1> JavaScript Test </h1>
        Sum The Nums Up!
        <br>
        <form>
            Number 1: <input type="text" name="n1" /><br>
            Number 2: <input type="text" name="n2" /><br>
        </form>
        <button id="b" onclick="func();" />Sum</button>
        <p id="b"></p>
        <script type="text/javascript">
            function sum() {
                var nn1 = document.getElementById("n1").value;
                var nn2 = document.getElementById("n2").value;
                var sum = parseInt(nn1) + parseInt(nn2);
                document.write(sum);
            }
        </script>
    </body>
</html>

Answer 1

替换：

function sum() {

使用：

function func() {

这可以防止您为同一个变量名分配2个不同的类型/值（你的问题中有一个sum函数和一个sum变量。）

替换：

document.write(sum);

使用

document.getElementById('b').innerHTML = sum;

此代码段会将sum的结果添加到<p id="b"></p>（例如，结果可能是：<p id="b">18</p>），而不是随意将其添加到HTML的末尾。

最后，替换：

Number 1: <input type="text" name="n1"/><br>
Number 2: <input type="text" name="n2"/><br>

使用：

Number 1: <input type="text" id="n1"/><br>
Number 2: <input type="text" id="n2"/><br>

document.getElementById在HTML中查找id属性，而不是name。

Answer 2

有两个问题： -

将onclick="func();"更改为onclick="sum();"，您正在调用错误/未定义的函数。

<button id="b" onclick="sum();"/>Sum</button>

将输入标记ID指定为n1和n2，您已将其指定为名称，并根据标识getElementById()

Number 1: <input type="text" id="n1"/><br>
Number 2: <input type="text" id="n2"/><br>

Answer 3

        <html>
        <body>
        <h1> JavaScript Test </h1>
        Sum The Nums Up!
        <br>
        <form>
        Number 1: <input type="text" id="n1" name="n1"/><br>
        Number 2: <input type="text" id="n2" name="n2"/><br>
        </form>
        <button id="b" onclick="sum();"/>Sum</button>
        <p id="b"></p>
        <script type="text/javascript">
        function sum()
        {
            var nn1 = document.getElementById("n1").value;
            var nn2 = document.getElementById("n2").value;
            var sum = parseInt(nn1) + parseInt(nn2);
            document.write(sum);
            }
        </script>
        </body>
        </html>

无法添加输入并在JavaScript中显示总和

3 个答案: