javascript conditional returning unexpected result

Question

I'm doing a simple number comparison on the keyUp event of an input field. For some reason, I'm not getting the expected result, and I can't figure out why. What should happen is that if the user-entered number is larger than that stored in the html attribute, the background should turn red, otherwise it stays white. Simply entering '9' will turn the background red. ??

var admin = $('input[name="diskStorage"]').attr('data-adminstorage'); // 2097152000

$('#new-user input[name="diskStorage"]').keyup(function(){

    if(admin < $(this).val())
        $(this).css('background','red');
    else
        $(this).css('background','white');
});

When I debug these values, if(2097152000 < 549) is returning true. Here's the html, in case that makes any difference:

<form action="administrate.php" method="post" id="new-user">
<table><tbody><tr>
...
  </tr><tr>
    <td>Disk Storage Limit:</td>
    <td>
   <input type="text" data-adminStorage="2097152000" name="diskStorage" value="" /> megaBytes<br />
    <span id="info"></span></td>
...
  </tr></tbody></table>

Here it is live: http://jsfiddle.net/JMC_Creative/dqAJj/2/

Jacob Relkin · Accepted Answer · 2011-01-24 22:13:34Z

2

.attr and .val() return String objects - use the unary + operator to convert it to a numeric value.

var admin = $('input[name="diskStorage"]').attr('data-adminstorage');
admin = +admin;

if(admin < +$(this).val()) {
   //...
}

edited Jan 24, 2011 at 22:13

answered Jan 24, 2011 at 22:08

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

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

7 Comments

user236139 Over a year ago

Unary + is a better way than parseInt(str, 10) in my opinion. Example: +str instead of parseInt(str, 10).

Jacob Relkin Over a year ago

@Reid In what way is it "better"?

Brian Donovan Over a year ago

That isn't true. '2097152000' < '549' is perfectly valid and results in true.

user236139 Over a year ago

@Jacob: Shorter amount of characters and much more efficient.

JCOC611 Over a year ago

@Reid: I support you, this is probably the best way, imo. Altho my answer takes even less characters lol.

|

JCOC611 · Accepted Answer · 2011-01-24 22:07:55Z

0

Try adding a /1 after retrieving the admin value, to make it a number not a string.

var admin = $('input[name="diskStorage"]').attr('data-adminstorage')/1;

Edit: also on the this.val:

$(this).val()/1;

answered Jan 24, 2011 at 22:07

JCOC611

19.8k15 gold badges71 silver badges90 bronze badges

3 Comments

ThiefMaster Over a year ago

There's parseInt(str, 10) for that.. no need to use hacks like that (they are very likely to cause bad things in JavaScript)

JCOC611 Over a year ago

yes I know, but I don't see how this could cause a bad thing, in a error scenario, both will return NaN

JCOC611 Over a year ago

Usually, I go with the option that takes less amount of code, if it is basically the same. Your users have to wait more to download your cleanness lol

Brian Donovan · Accepted Answer · 2011-01-24 22:10:03Z

0

They are probably both strings. You should convert them to numbers first:

var admin = Number($('input[name="diskStorage"]').attr('data-adminstorage')); // 2097152000

$('#new-user input[name="diskStorage"]').keyup(function(){

    if(admin < Number($(this).val()))
        $(this).css('background','red');
    else
        $(this).css('background','white');
});

answered Jan 24, 2011 at 22:10

Brian Donovan

8,4101 gold badge28 silver badges25 bronze badges

Collectives™ on Stack Overflow

javascript conditional returning unexpected result

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related