Ne peut pas additionner deux nombres correctement sans l'aide de parseFloat en JavaScript

Je suis tombé sur ce problème. Il d'ajouter des numéros à l'aide de parseFloat ou parseInt.
SI textbox1 valeur est de 4 et textbox2 valeur est 2, puis je me suis en sortie (voir script)

Mon doute est pourquoi, dans plus seul

parseFloat($('#txt1').val()) + parseFloat($('#txt2').val())

donne de la valeur correcte mais

parseFloat($('#txt1').val() + $('#txt2').val())

n'est pas en donnant la valeur correcte alors que

  • parseFloat($('#txt1').val() - $('#txt2').val()),
  • parseFloat($('#txt1').val() /$('#txt2').val()),
  • parseFloat($('#txt1').val() * $('#txt2').val())

donnent la valeur correcte.
Son simple mais je n'arrivais pas à trouver de 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>
C'est parce que l'opérateur + est également utilisé dans les cordes, tandis que le - et * les opérateurs ne sont pas. Avec des langages à typage comme cela, vous obtenez ce comportement.
Je suis surpris que personne n'a suggéré l'excellent jQuery plugin arithmétique.

OriginalL'auteur Lakshmana Kumar | 2013-04-20