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>
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>
Share
Improve this question
edited Jun 21, 2015 at 8:58
royhowie
11.2k14 gold badges53 silver badges67 bronze badges
asked Apr 20, 2013 at 7:43
Lakshmana KumarLakshmana Kumar
1,2493 gold badges17 silver badges34 bronze badges
2
- 3 This is because the + operator is also used in strings, while the - and * operators are not. With loose-typed languages like this you get this behaviour. – Kaiwa Commented Apr 20, 2013 at 7:46
- 1 I'm surprised no one suggested the excellent jQuery arithmetic plugin. – Benjamin Gruenbaum Commented Jun 21, 2015 at 8:49
2 Answers
Reset to default 10$.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.
$('#txt1').val() + $('#txt2').val()
it gives String value
you can not use - , * , /operator on strings
parseFloat($('#txt1').val()), parseFloat($('#txt2').val())
returns numbers not strings