javascript简单加法计算

我是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>

---

这是你的答案

    <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>

---

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

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

---

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

顺便说一下：

---

如果要命名具有相同ID的两个或多个元素，请使用class属性。使用document.getElementsByCassNamedemo可以获得一个元素数组。

当您从输入控件中获取值时，您将获得字符串类型，即使您在html中将其设置为数字类型-该类型仅用于文本输入限制，您只能在该文本框中输入数字

var ans = x + y;

在这里，您只需将x和y字符串链接到一个新变量，这就是“+”运算符在字符串上使用时的作用

您可以通过环绕字符串的符号来注意字符串，而数字不是。。。 解析字符串对象到数字的反序列化可以通过parseFloat转换为float类型和parseInt转换为int类型来完成

此外，您还可以通过instanceof或构造函数检查类型：

if(ans.constructor === String){

}

---

对数字使用parseInt或parseFloat可能的重复项不能回答基本问题。原因由@pavelDurovMy给出。我的问题是修辞性的。要使答案完整，不仅需要给出代码，还需要解释代码解决问题的原因和方式。在解释中提到另一个答案并不符合实际情况。

if(ans.constructor === String){

}