Cannot add two numbers correctly without using parseFloat in JavaScript
addition, javascript, jquery
Solution
`$.val()` returns a string value.
So in your first example you convert both returned strings to numbers and the calculation is fine.
If you use `parseFloat($('#txt1').val() + $('#txt2').val())` the `+` does not work as the arithmetic operator, but as a string concatenation. So you concatenate both strings and convert them afterwards, which gives a wrong result.
The examples using `-` will work, as there is no string operation using `-` and by thus alls values get implicitly converted to a number before the operation is applied.
Problem
I came across this problem. It adding numbers using parseFloat or parseInt. IF textbox1 value is 4 and textbox2 value is 2 then i got output as (see script) My doubt is why in addition alone `parseFloat($('#txt1').val()) + parseFloat($('#txt2').val())` gives correct value but `parseFloat($('#txt1').val() + $('#txt2').val())` is not giving correct value whereas - `parseFloat($('#txt1').val() - $('#txt2').val())`, - `parseFloat($('#txt1').val() / $('#txt2').val())`, - `parseFloat($('#txt1').val() * $('#txt2').val())` are giving correct value. Its simple but i couldn't find solution. =====jQuery ``` function Calculate() { //--> Output $('#lbl1').html(parseFloat($('#txt1').val() + $('#txt2').val())); //--> 42 $('#lbl2').html(parseFloat($('#txt1').val()) + parseFloat($('#txt2').val())); //--> 6 $('#lbl3').html(parseFloat(4 + 2)); //--> 6 $('#lbl4').html(parseFloat($('#txt1').val() - $('#txt2').val())); //--> 2 $('#lbl5').html(parseFloat($('#txt1').val() * $('#txt2').val())); //--> 8 $('#lbl6').html(parseFloat($('#txt1').val() / $('#txt2').val())); //--> 2 } ``` =====HTML ``` <table> <tr> <td> <input type="text" id="txt1" /> </td> <td> <input type="text" id="txt2" /> </td> </tr> <tr> <td> <input type="button" value="Calculate" onclick="Calculate()" /> </td> <td> <label id="lbl1"> </label> | <label id="lbl2"> </label> | <label id="lbl3"> </label> | <label id="lbl4"> </label> | <label id="lbl5"> </label> | <label id="lbl6"> </label> </td> </tr> </table> ```