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