Comparing two integer values showing strange results

Question

I just came across a strange situation while comparing two integer values. One value is read from Database and its type is int so this is an int value. Second value comes from a textbox whose type is number.

If textbox value is less than 100 than comparison is fine if it is greater than 100 comparison shows strange results.

If i use parseInt than everything is fine. I just want to know why this is happening ?

var CADMeterReading = 10;
<input type="number" name="MeterReading" placeholder="0000" value="20" id="MeterReading"   />

if($("#MeterReading").val()) <= CADMeterReading) //returns false as excepted

If textbox has value greater than 100 than it is not comparing as expected

var CADMeterReading = 80;
<input type="number" name="MeterReading" placeholder="0000" value="100" id="MeterReading"   />

if($("#MeterReading").val()) <= CADMeterReading) //returns true

input's `value` attribute will always return a string. You need to use `parseInt`. — Hitesh Vaghani, Nov 27 '15 at 07:23
`"100" <= 80` **does not** return true. http://jsfiddle.net/13no19dz/ — Salman A, Nov 27 '15 at 07:42

score 4 · Answer 1 · answered Nov 27 '15 at 07:23

4

Defining the type of the input as number only stops the use from entering anything else than numbers:

<input type="number" name="MeterReading" placeholder="0000" value="20" id="MeterReading"/>

But that does not means that javascript will read it as a number.

$("#MeterReading").val() will return the data as String type, and hence you are comparing a string and an integer, which results in strange comparison.

That is also why when you use parseInt, the numbers are compared properly, since you have now asked javascript to convert the string to integer before comparing.

answered Nov 27 '15 at 07:23

Ahs N

8,233
1
28
33

But why this works fine for values less than 100 ? – Mairaj Ahmad Nov 27 '15 at 07:24
That is probably because the ASCII value of the _character_ you entered is less than the _integer_ you are comparing it to, which results in giving you the 'seemingly' correct comparison result. – Ahs N Nov 27 '15 at 07:27
Hi Its still working without parseInt. Mairaj in your code you kept an extra ')' in condition. may be that would be an issue.. **Demo link :** http://jsfiddle.net/asimshahiddIT/8s3vd59r – asimshahiddIT Nov 27 '15 at 07:33
Actually, the comparison will work as-is without `parseInt` (etc) as long as one operand is not-a-string. – Salman A Nov 27 '15 at 07:36

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

An input element will always return a string, this is just how jQuery.val() works, and I think to a large degree takes it's lead from the HTML spec (which defines the return value of inputElement.value as type DOMString).

See more discussion of this here: How can val() return Number? , but essentially it sounds like you've found the answer already in terms of functionality - use parseInt($("#MeterReading").val(),10)

edited May 23 '17 at 12:07

Community

1
1

answered Nov 27 '15 at 07:21

Chris O'Kelly

1,863
2
18
35

I just want to know why this works for values less than 100 and not for greater than 100. – Mairaj Ahmad Nov 27 '15 at 07:24
It's performing a string comparsion – Chris O'Kelly Nov 27 '15 at 07:24

Chirag Shah · Answer 3 · 2015-11-27T07:35:42.837

0

Defining number, doesn't mean that it provides value in integer, it always gives you as string So you need to use parseInt() to convert it into integer for compare number

Its string comparison, try "100" < 101, this give you true So don't take it like it not works with above 100

edited Nov 27 '15 at 07:35

answered Nov 27 '15 at 07:30

Chirag Shah

509
1
10
25

Comparing two integer values showing strange results

3 Answers3