尝试添加数字答案

【问题标题】：Trying to add numbers尝试添加数字
【发布时间】：2021-05-09 10:34:50
【问题描述】：

我正在尝试制作一个非常简单的加法计算器，但它似乎是连接它们而不是添加值，有人可以帮助我吗？

window.onload = function(){
  document.getElementById("addingButton").addEventListener("click", add);

function add(e){    
    var x = document.getElementById("inputOne").value;
    
    var y = document.getElementById("inputTwo").value;
    
    var out = "";
     
    out += "Output: " + (x + y);
    
    alert(out);
  }
}

 <div id="container">
      <button id="addingButton"> Add!</button>
         <input id="inputOne" type=number/>
         <input type=number id="inputTwo"/>
   </div>

【问题讨论】：

Duplicate of Input value is a string instead of a number。

标签： javascript

【解决方案1】：

您需要像这样使用parseInt() 函数单独解析values：

window.onload = function() {
  document.getElementById("addingButton").addEventListener("click", add);
  function add(e) {
    var x = document.getElementById("inputOne").value;
    var y = document.getElementById("inputTwo").value;
    var out = "";
    out += "Output: " + (parseInt(x) + parseInt(y));
    alert(out);
  }
}

<div id="container">
  <button id="addingButton"> Add!</button>
  <input id="inputOne" type=number/>
  <input type=number id="inputTwo" />
</div>

【讨论】：

请注意：parseInt('123foo bar') 返回123。如果您不喜欢这样，请改用Number(<string>)。
请使用parseIntwith the second parameter 10。考虑改用Number 或parseFloat，或者专门针对<input>s，.valueAsNumber。

【解决方案2】：

这会奏效。如果您愿意，可以删除“type='number'”。

window.onload = function(){
  document.getElementById("addingButton").addEventListener("click", add);

function add(e){    
    var x = parseInt(document.getElementById("inputOne").value);
    
    var y = parseInt(document.getElementById("inputTwo").value);
    
    var out = x+y;
     
    
    
    alert("Output: " + out);
  }
}

<div id="container">
      <button id="addingButton"> Add!</button>
         <input type='number' id="inputOne"/>
         <input type='number' id="inputTwo"/>
   </div>

【讨论】：