Issue with variable and if statement in jQuery

Question

Why code fragments that looks similar works in different ways?

<input data-value-max="10">

1. If script gets option from attr, it always updates input with option value:

$('input').keyup(function(e) {

  var $this = $(this);
      option = $this.attr('data-value-max');
      val = $this.val();

  if (val > option){   // ←---
    e.preventDefault();
    $this.val(option);
  }

});

I mean that if I type 3 or 10, script updates input to 10.

2. The second variant works just as I expect—it replaces input value only if it is greater then a number in if statement:

$('input').keyup(function(e) {

  var $this = $(this);
      option = $this.attr('data-value-max');
      val = $this.val();

  if (val > 10){   // ←---
    e.preventDefault();
    $this.val(option);
  }

});

So I can't understand why the first variant replaces input value all the time?

Where is `val` defined in second code ? – Denys Séguret Feb 25 '13 at 14:01 — Denys Séguret, Feb 25 '13 at 14:01

Denys Séguret · Accepted Answer · 2013-02-25T14:17:34.367

6

You don't parse the values and attributes.

You should know that "3" > "10" but 3 < "10" (in the latter case, "10" is automatically converted for the comparison).

Use parseInt :

var option = parseInt($this.attr('data-value-max'), 10);

As your attribute has the data prefix, you might also use jQuery data's auto conversion feature :

var option = $this.data('value-max');

But personally I try to avoid it (especially given the bugs in 1.7 version) and I prefer to be explicit. And it wouldn't work for any value that you can parse as numbers : only those that give the same exact string if toString is called on the number (it would fail for "03" or "+03" for example).

edited Feb 25 '13 at 14:17

answered Feb 25 '13 at 14:02

Denys Séguret

372,613
87
782
758

1

or simply `(+val > +option)` – Christoph Feb 25 '13 at 14:04
1

or simply `option = $this.attr('data-value-max')*1;` – iambriansreed Feb 25 '13 at 14:05
1

or simpler `option = +$this.attr('data-value-max')` >_> – Christoph Feb 25 '13 at 14:07
or even simpler `option = +$this.data('value-max')` ^.^ – Christoph Feb 25 '13 at 14:11
1

or even even simpler `option = $this.data('value-max')` like said in the [doc](http://api.jquery.com/data/#data-html5). – abernier Feb 25 '13 at 14:14
2

@abernier That's what I was mentioning in my answer, but be careful as it wouldn't work for `"01"` for example. It tests `+data+""===data`. – Denys Séguret Feb 25 '13 at 14:22
the autoconversion part on `data()` was new to me, n1;) – Christoph Feb 25 '13 at 14:31
@Christoph [Be wary of it](http://stackoverflow.com/questions/14940778/prevent-converting-string-containing-an-e-and-numbers-to-number). Personally I'd be very prudent with such a difficult to predict function. – Denys Séguret Feb 25 '13 at 14:32
That's the point I was interested in. I would never rely on such a "feature" in a real application - but if you don't know about it, you cannot know why it's malfunctioning... ;) – Christoph Feb 25 '13 at 14:37

iambriansreed · Answer 2 · 2013-02-25T14:21:46.443

Cleaner:

$('input').keyup(function(e) {

    var max_value = $(this).data('value-max') * 1;

    if( this.value * 1 > max_value )
        this.value = max_value;

});

You are comparing strings in your first example and in your second you are comparing a string to an integer (10). You want to convert your strings to an integer for your expected comparison. One method is the *1 I used above.

Finally e.preventDefault() is not needed.

score 0 · Answer 3 · answered Feb 25 '13 at 14:04

Your second example is relying on JavaScript's type-coercion to compare.

What you are literally doing is testing if "3" > 10 which JS interpreter realizes you're trying to do a numeric comparison and converts it internally to 3 > 10

This is just fine if you understand what the interpreter will try and coerce....similar examples would be:

var x = 0;
if(x) { /* do stuff */ } //0 is a falsy (but not === false) value so the test will always fail

var y = "10";
console.log(y * 10) //outputs 100;

score -1 · Answer 4 · answered Feb 25 '13 at 14:04

-1

I suspect your issue has root in weak typing and type conversion. try this:

 if(parseInt(val) > 10) { ...

answered Feb 25 '13 at 14:04

bjorn

46
5

1

right guess, but wrong way around... Your example works, because val is coerced, but not the first one where both values are strings. – Christoph Feb 25 '13 at 14:05
My comment actually makes no sense at all because it addresses the second (working) code block and not the non-working first one. the point was parseInt() though. – bjorn Feb 25 '13 at 14:11

Issue with variable and if statement in jQuery

4 Answers4