Javascript character count

Question

Example here: http://jsfiddle.net/67XDq/1/

I have the following HTML:

<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 type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/>
              <textarea 
                 onKeyDown="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500);"
                 onKeyUp="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500)" 
                 class="scanwid" name="q17" id="q17" rows="5" cols="">
              </textarea>
    </td>
</tr>

And the following Javascript:

function textCounter(field,cntfield,maxlimit) {
    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;
    }

For some reason, which I am completely missing, this doesn't seem to be working as intended.

It should limited the number of characters in the textarea and also countdown the number within the label but it is doing neither.

Answer 1

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;
}

Answer 2

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/