JavaScript (+) sign concatenates instead of giving sum?


The + sign concatenates because you haven’t used parseInt(). The values from the textbox are string values, therefore you need to use parseInt() to parse the value.

After selecting the value from text box, you need to parse that value. Following is the code −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
FirstNumber:
<input type="num" class="num1" placeholder=""><br>
SecondNumber:<input type="num" class="num2" placeholder=""><br><br>
<input type="button" onclick="sumOfTwoNumbers()" value="Addition">
<p class="output"></p>
<script>
   function sumOfTwoNumbers(){
      var num1 = document.querySelector(".num1").value;
      var num2 = document.querySelector(".num2").value;
      var addition = parseInt(num1)+parseInt(num2);
      document.querySelector(".output").innerHTML = "The addition of two
      numbers= " + addition;
   }
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

Now, enter the value in both the textboxes and click the “Addition” button to get the sum −

Updated on: 03-Sep-2020

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements