Issue with variable and if statement in jQuery
<p>Why code fragments that looks similar works in different ways?</p>

<pre><code>&lt;input data-value-max="10"&gt;
</code></pre>

<p><strong>1.</strong> If script gets <code>option</code> from <code>attr</code>, it always updates <code>input</code> with <code>option</code> value:</p>

<pre><code>$('input').keyup(function(e) {

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

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

});
</code></pre>

<p>I mean that if I type <code>3</code> or <code>10</code>, script updates input to <code>10</code>.</p>

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

<pre><code>$('input').keyup(function(e) {

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

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

});
</code></pre>

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