Question

我正在学习javascript并尝试完成一个简单的练习：添加2个数字，这些数字在2个单独的输入字段中输入并在页面上显示总和。按下按钮时会执行以下脚本。我不知何故无法解决的问题是添加的结果总是为零。我在这做错了什么？

    var inputA = document.getElementById("numberA"); 
    var convertA = +inputA;
    var inputB = document.getElementById("numberB");
    var convertB = +inputB;

    function myFunction() {
    document.getElementById("result").innerHTML = convertA + convertB;
    }

Answer 1

您需要获取文本输入的值。

var inputA = document.getElementById("numberA").value;
//                                             ^^^^^^

请将变量移到函数中，因为value属性返回一个字符串而不是对象的引用。

＆＃13;

function myFunction() {
    var inputA = document.getElementById("numberA").value; 
    var inputB = document.getElementById("numberB").value;
    var convertA = +inputA;
    var convertB = +inputB;
    document.getElementById("result").innerHTML = convertA + convertB;
}

＆＃13;

<input id="numberA" type="text">
<input id="numberB" type="text">
<button onclick="myFunction()">calc</button>
<div id="result"></div>

＆＃13;

Answer 2

这方面的一个示例是获取值，然后在将它们添加到一起之前将它们解析为整数。在输入上设置值0可防止用户获得NaN的结果。您还可以删除这些初始值并编写if语句来检查空值。

无论如何，这是我提出的：

<!DOCTYPE html>
<html>
<head>
    <title>Test Function</title>
</head>
<body>
    <!-- Create Inputs -->
    <input id="numberA" type="number" value="0">
    <input id="numberB" type="number" value="0">

    <!-- Function Button -->
    <button onclick="myFunction()">Add Numbers</button>

    <!-- Display Result -->
    <div id="result"></div>

    <!-- Run Script -->
    <script>
        // Get Inputs by ID
        var inputA = document.getElementById("numberA"); 
        var inputB = document.getElementById("numberB");

        // Parse Values and Add Integers
        function myFunction() {
            document.getElementById("result").innerHTML = parseInt(inputA.value) + parseInt(inputB.value);
        }
    </script>
</body>
</html>

Answer 3

在开始编写Javascript之前我认为你必须知道它如何与页面中的元素交互：每个元素都由DOM（域对象模型）表示，Javascript可以与查询此DOM以获取它们的元素进行交互，但是以虚拟表示的形式：DOM对象。这就是你试图总结的......两个代表输入元素的DOM对象。

作为对象，它们可以通过点符号访问自己的属性，并且为了获取这些字段的值，@ Nina Scholz的答案就是这样。

所以，当您通过ID获取元素，或者按标记，按名称等获取元素等等时......您必须考虑这一点。

Answer 4

虽然没有关系。根据Nina Scholz的回答，您必须考虑输入的类型并将其更改为数字，这样您就不会得到未定义或NaN结果。

学习Javascript：添加2个数字

4 个答案: