Javascript character count

There are two issues in the fiddle

  • no form element
  • script mode was onload, which means that window object didnt have textCounter function

see updated fiddle http://jsfiddle.net/67XDq/7/, markup:

<tr id="rq17">
   <td class='qnum'>17.</td>
   <td class='qtext'>
    Questions? <i>Maximum of 500 characters - 
    <input style="color:red;font-size:12pt;font-style:italic;" readonly="readonly" type="text" id='q17length' name="q17length" size="3" maxlength="3" value="500" /> characters left</i>
    <br />
    <textarea 
          onKeyDown="textCounter(this,'q17length',500);"
          onKeyUp="textCounter(this,'q17length',500)" 
          class="scanwid" name="q17" id="q17" rows="5" cols=""></textarea>
   </td>
</tr>

and code

function textCounter(field, cnt, maxlimit) {         
  var cntfield = document.getElementById(cnt)   
  if (field.value.length > maxlimit) // if too long...trim it!
    field.value = field.value.substring(0, maxlimit);
    // otherwise, update 'characters left' counter
  else
    cntfield.value = maxlimit - field.value.length;
}

CHange your html to remove all that onkey stuff

<tr id="rq17">
  <td class='qnum'>17.</td>
  <td class='qtext'>Questions? <i>Maximum of 500 characters - <input id="charsLeft" style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/><textarea class="scanwid" name="q17" id="q17" rows="5" cols="" maxlength="500"></textarea></td>
</tr>

And the javascript is this:

 $("#q17").keyup(function() {
    $('#charsLeft').val(500 - $(this).val().length);
});

Here's a fiddle: http://jsfiddle.net/67XDq/11/