javascript error with html textarea

I just added a textarea to my page which is an "include" to another page...I have some script that does a counter in the textarea...heres the code for that:

function characterCounter(spanId, maxLen, inputElement)
{
  if (spanId)
  {
      // Update the counter the user sees.
      var whatIsLeft = maxLen - inputElement.value.length;

      if ( whatIsLeft < 0 ) whatIsLeft = 0;
      spanId.innerText = whatIsLeft;
  }

  // Restrict user from entering more than the maxlen.
  if ( inputElement.value.length > maxLen )
  {
      inputElement.value = inputElement.value.substring( 0, maxLen );
  }
}

The I get a javascript error here as soon as I type....any suggestions

      <textarea id="comment" name="comment" rows="2" cols="125" 
                 onkeypress="characterCounter(commentsCounter,${const['COMMENT_MAX_LENGTH']}, this)"
                 onkeydown="characterCounter(commentsCounter,${const['COMMENT_MAX_LENGTH']}, this)"
    开发者_C百科             onkeyup="characterCounter(commentsCounter,${const['COMMENT_MAX_LENGTH']}, this)">
      </textarea>

      <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
     </td>
        You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}</span></strong> characters left.<br />

Thanx

these two lines say: "object expected"...in the debugger

onkeydown="characterCounter(commentsCounter,250, this)"
                 onkeyup="characterCounter(commentsCounter,250, this)">

Replace:

onkeydown="characterCounter(commentsCounter,250, this)"
onkeyup="characterCounter(commentsCounter,250, this)">

With

onkeydown="characterCounter('commentsCounter',250, this)"
onkeyup="characterCounter('commentsCounter',250, this)">

And

function characterCounter(spanId, maxLen, inputElement)
{
   if (spanId)

With

function characterCounter(id, maxLen, inputElement)
{
    spanId = document.getElementById(id);
   if (spanId)

Your code as it stands, expects commentsCounter to be a globally accessible variable. In order to access the element with id commentsCounter, you must use document.getElementById

Your function looks to be expecting a DOM node for spanID and you are passing it the id of commentsCounter without quotes. You probably want this somewhere in a <script> tag after the <span id='commentsCounter'> has been loaded:

You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}</span></strong> characters left.<br />

<script type='text/javascript'>
  var commentsCounter = document.getElementById("commentsCounter");
</script>

Then you don't need to modify the key event handlers for the textarea, as commentsCounter is now a proper, non-empty variable.

Use below:

<textarea id="comment" name="comment" rows="2" cols="125" 
  onkeypress="characterCounter(\"commentsCounter\",${const['COMMENT_MAX_LENGTH']}, this)"   
  onkeydown="characterCounter(\"commentsCounter\",${const['COMMENT_MAX_LENGTH']}, this)" 
  onkeyup="characterCounter(\"commentsCounter\",${const['COMMENT_MAX_LENGTH']}, this)">
</textarea>

The parameter that is suppose to be of type string must always be quoted. If there is quote inside quote then in java script you can use " (double quote) between ' (single quote) or vice versa, optionally use escape character if required like I used in above example. You can simply replace \" with '

Thanks Shailendra