0

This is a small project I have to teach kids and I looked at every single letter and don't understand why my addition function does not work properly. All of my code but the addition works properly. When I use the add function it doesn't add it just puts the two numbers together and i don't see why.

 <!DOCTYPE html>
<html> 
<head>
 
<title>Calculator </title>
 
</head>
<body>

<p>1st Number :</p>
<input type="text" id="firstNumber"> 
<p>2nd Number :</p>
<input type="text" id="secondNumber"> 

<div>
<button id="Add" >Add</button>
<button id="Subtract" >Subtract</button>
<button id="Multiply" >Multiply</button>
<button id="Divide" >Divide</button>
 
<p>The result is :</p>
<p id="answer"></p>

</div>
</body>
</html>

    function Multiply(){
    var num1 = document.getElementById('firstNumber').value; 
    var num2 = document.getElementById('secondNumber').value;
    var a = num1*num2;
    document.getElementById('answer').innerHTML = a;
}
function Divide(){
    var num1 = document.getElementById('firstNumber').value; 
    var num2 = document.getElementById('secondNumber').value;
    var a = num1/num2;
    document.getElementById('answer').innerHTML = a;
}
function Add(){
    var num1 = document.getElementById('firstNumber').value; 
    var num2 = document.getElementById('secondNumber').value;
    var a = num1+num2;
    console. log(a);
    document.getElementById('answer').innerHTML = a;
    
}
function Subtract(){
    var num1 = document.getElementById('firstNumber').value; 
    var num2 = document.getElementById('secondNumber').value;
    var a = num1-num2;
    document.getElementById('answer').innerHTML = a;
}
document.getElementById('Multiply').onclick =
  Multiply;
document.getElementById('Divide').onclick =
  Divide;
document.getElementById('Add').onclick =
  Add;
document.getElementById('Subtract').onclick=
  Subtract;
  • 3
    `.value` returns a string, so `+` is concatenation. Convert them to numbers before doing arithmetic. – Barmar Aug 10 '20 at 19:44
  • `Number(document.getElementById('firstNumber').value)` – Barmar Aug 10 '20 at 19:44
  • `.value` is always `String` type, so default behaviour for `+` operator is concatenate strings. You can not make operation divide `/`, multiply `*` or substract `-` with two strings, that's why js successfully tries to convert them to `Number`. If you're planning to get Number from input, **always** validate it and convert it! – filimonic Aug 10 '20 at 19:50

0 Answers0