javascript 简单的加法计算

Question

我是 javascript 的新手。我不知道我的代码有什么问题

num1:<input id="num1" type="number">
num2:<input id="num2" type="number">

<button type="button" onclick="myFunction()">compute</button>

answer:<input id="demo" type="text"> and answer: <p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("num1").value;
    var y = document.getElementById("num2").value;
    var ans = x + y;
    document.getElementById("demo").innerHTML = ans;
}
</script>

Answer 1

这是你的答案...

    <button type="button" onclick="myFunction()">compute</button>

answer:<input id="demo" type="text"> and answer: <p id="demo"></p>

<script> function myFunction() {
    var x = document.getElementById("num1").value;
    var y = document.getElementById("num2").value;  
    var ans = parseInt(x) + parseInt(y);
    document.getElementById("demo").innerHTML = ans; }
</script>

Answer 2

您有两次 id="demo"。在输入的情况下没有 innerHtml，它是值而不是你想要的。所以使用这个：

    document.querySelector("p#demo").innerHTML = ans;

Answer 3

不要在文档中两次使用 ID，并且您从输入字段中获得的值是字符串并且您进行了字符串加法，因此您必须先将其解析为整数. HTML5 输入类型 number 仅在某些新浏览器中显示一个字段，该字段对数字以外的其他字符无效，但是当您使用 javascript 读取它的值时，您会得到一个字符串。您可以使用 parseInt 解析您的字符串。如果要支持浮动，可以使用parseFloat.

num1:<input id="num1" type="number">
num2:<input id="num2" type="number">

<button type="button" onclick="myFunction()">compute</button>

answer:<input id="demoInput" type="text"> and answer: <p id="demoHtml"></p>

<script>
function myFunction() {
    var x = document.getElementById("num1").value;
    var y = document.getElementById("num2").value;
    var ans = parseInt(x) + parseInt(y)
    document.getElementById("demoInput").value = ans;
    document.getElementById("demoHtml").innerHTML = ans;
}
</script>

顺便说一句：如果要命名两个或多个具有相同 ID 的元素，请使用 class 属性。然后你得到 document.getElementsByClassName("demo") 一个元素数组。

Answer 4

当您从输入控件获取值时，您将以字符串类型获取它，即使您在 html 中将其设置为数字类型 - 这种类型仅用于文本输入限制（您只能输入数字到那个文本框）。

var ans = x + y;

在这里，您只是 "chained" 将 x 和 y 字符串添加到一个新变量中 - 这就是“+”运算符在字符串上使用时所做的。

您可以通过围绕它们的 " 符号注意到字符串，而数字不是...

字符串对象解析（反序列化）为数字可以用parseFloat（转float类型）和parseInt（转int类型）

此外，您可以通过 instanceof 或使用构造函数检查类型 ether:

if(ans.constructor === String){

}

javascript 简单的加法计算

javascript simple addition computation

html

javascript

add

computation

addition