CODEWITHSUNDEEP
javascript
Eric Vargas
Eric Vargas

Reputation: 9

Trying to add numbers

I am trying to make a very simple adding calculator but it seems to be concatenating them instead of adding the values, can someone help me? 

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>

Upvotes: 0

Views: 91

Answers (2)

user12457207
user12457207

Reputation:

This will work. You can remove 'type='number'' if you like.

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>

Upvotes: 0

Spectric
Spectric

Reputation: 32002

You'll need to parse the values individually using the parseInt() function like so:

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>

Upvotes: 3

Related Questions