Why isn't this simple jQuery code working?
<p>I am only 2 days into jquery so I'm probably making a simple error here. Basically I have a input field that when clicked gets a blue border around it (doing this by having a css class be added to the input field on keyup and the css adds the border color). On keyup the submit button also shows. The only other thing I want is to show a remaining character count. Everything else works except the last part. Here's all my code:</p>

<pre><code>&lt;style type="text/css"&gt;.onFocus { border:3px solid #BBDAFD; }&lt;/style&gt;

&lt;script type="text/javascript"&gt;
    $(document).ready(function(){

        $('.submitButton').hide();
        $('.remaining').hide();

        var typed = $('input1').val();

        $('.input1').keyup(function(){
            $('.input1').addClass('onFocus');
            $('.submitButton').show();
            $('.remaining').show().html(150 - typed);
        });

    });
&lt;/script&gt;

&lt;form action="submitComment.php" name="" method="post"&gt;
    &lt;label&gt;Leave a comment&lt;/label&gt;
    &lt;input type="text" class="input1" maxlength="150" /&gt;
    &lt;br /&gt;
    &lt;span class="remaining"&gt;&lt;/span&gt;
    &lt;br /&gt;
    &lt;input type="button" name="commentSubmit" value="Submit Comment" class="submitButton" /&gt;
&lt;/form&gt;
</code></pre>

<p>Instead of executing the operation 150 (which is the max character limit I want to allow) from the present value of the input field which should be stored in the variable "typed", instead jquery just splits out:</p>

<blockquote>
  <p>NaN</p>
</blockquote>

<p>What is the problem/solution here?</p>

<h2>EDIT</h2>

<p>Opps, just noticed that this:</p>

<pre><code>var typed = $('input1').val();
</code></pre>

<p>should be:</p>

<pre><code>var typed = $('.input1').val();
</code></pre>

<p>Now NAN doesn't show but 150 shows. So the operation is still not being performed.</p>
