Question

I feel that I might be overlooking something here. I wan to display the character count of a textarea in a <span> element underneath the <textarea>. I am using the following jQuery and HTML:

jQuery:

$('#ws3 .textarea textarea[name="company-description"]').keyUp(function() {

var charLength = $(this).val().length;

$('span#charCount').html(charLength + ' of 250 characters used');

if($(this).val().length > 250)
$('span#charCount').html('<strong>You may only have up to 250 characters.</strong>');

});

HTML:

<div id="ws3" class="ws-section">
<label for="company-description">Describe your company for us</label>
<div class="textarea">
  <textarea id="company-description" name="company-description" class="ws-required"></textarea>
</div>
<span id="charCount">charCount</span>
</div>

Also, all jQuery code following this block does not work, almost as if the browser has stopped reading the .js file at this block of code.

Answer 1

There is no keyUp function.. change it to keyup and then it should work fine..

$('#ws3 .textarea textarea[name="company-description"]').keyup(function() {

DEMO

Tips:

1. When there is script error, Javascript compiler will stop executing the following lines below the error line and will continue on to next js file or next <script> block
2. In future, whenever you have some issue with a script, please look at the console for errors. Below is what I got when I used keyUp

Error: $(“#ws3 .textarea textarea[name=\”company-description\”]”).keyUp is not a function