Cannot add two numbers correctly without using parseFloat in JavaScript

Question

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>

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
– Kaiwa, Commented Apr 20, 2013 at 7:46
I'm surprised no one suggested the excellent jQuery arithmetic plugin. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jun 21, 2015 at 8:49

Sirko · Accepted Answer · 2013-04-20 07:47:33Z

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.

answered Apr 20, 2013 at 7:47

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PSR · Accepted Answer · 2013-04-20 07:52:00Z

1

$('#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

edited Apr 20, 2013 at 7:52

answered Apr 20, 2013 at 7:45

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Collectives™ on Stack Overflow

Cannot add two numbers correctly without using parseFloat in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related