The Adding function doesn't work in JavaScript

Question

when i'm using the function to add two numbers together it appears next to each other like (2+2=22) although it works well with other mathematical operators (* and /)

    <html>
  <head>
    
        <title>Adding</title>
    
    
  </head>

  <body>
      
      <input type="number" id="one">
      <input type="number" id="two">
      <button id="press">seed</button>
    
    <script type="text/javascript">
        
        function adding (a, b){
                return (a + b);
                }
        document.getElementById("press").onclick = function(){
            var first = document.getElementById("one").value;
            var second = document.getElementById("two").value;
                
            alert(adding(first, second));
        }
        
    </script>
    
  </body>

Does this answer your question? [Adding two numbers concatenates them instead of calculating the sum](https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum) — devlin carnate, Aug 13 '20 at 21:55
Does this answer your question? [How to force JS to do math instead of putting two strings together](https://stackoverflow.com/questions/4841373/how-to-force-js-to-do-math-instead-of-putting-two-strings-together) — Sebastian Simon, Aug 15 '20 at 03:14

score 4 · Answer 1 · answered Aug 13 '20 at 21:49

4

You are adding the string "2" plus "2" hence they are just appended. You will need to typecast into a number first.

console.log(parseInt("2")+Number("2"))

answered Aug 13 '20 at 21:49

MarkCBall

229
1
4

1

You can use Number() constructor for both of them or parseInt for both of them why different ? – Shubham Dixit Aug 13 '20 at 21:51
i want the numbers to be recognized when type them in the website – K. Kassed Aug 13 '20 at 21:53
Simply to showcase various ways to turn a string into a number. – MarkCBall Aug 13 '20 at 21:54
`var second = Number(document.getElementById("two").value);` should do the trick =) – MarkCBall Aug 13 '20 at 21:55

score 1 · Answer 2 · answered Aug 13 '20 at 21:51

The value attribute returns a string, for which the + operator is defined to concatenate. You can use the unary plus operator to simply convert them to a numbers.

function adding(a, b) {
  return (a + b);
}
document.getElementById("press").onclick = function() {
  var first = +document.getElementById("one").value;
  var second = +document.getElementById("two").value;

  alert(adding(first, second));
}

<input type="number" id="one">
<input type="number" id="two">
<button id="press">seed</button>

score 0 · Answer 3 · answered Aug 13 '20 at 21:58

You can only write parseint where you return.

 function adding (a, b){
    return (parseInt(a) + parseInt(b));
}
document.getElementById("press").onclick = function(){
    var first = document.getElementById("one").value;
    var second = document.getElementById("two").value;

    alert(adding(first, second));
}

<input type="number" id="one">
<input type="number" id="two">
<button id="press">seed</button>

The Adding function doesn't work in JavaScript

3 Answers3