Code Not Working in Firefox: keyup event

[jayturley]

I have a web page with the following items on it:

[HTML]<label for="commissionschedule">
Commission Schedule<br />
<span id="charCounter">1000 characters or less</span>
</label>
<textarea id="commissionschedule" rows="10" cols="40"></textarea>[/HTML]

I'm using a standard javascript addEvent function and am attaching a keyup event to the textarea as follows:

function addEvent(elm, evType, fn, useCapture)
// cross browser event handling
{
  if (elm.addEventListener)
  {
   elm.addEventListener(evType, fn, useCapture);
   return true;
  } else if (elm.attachEvent)
  {
   var r = elm.attachEvent('on' + evType, fn);
   return r;
  } else
  {
   elm['on' + evType] = fn;
  }
}
 
function addListeners(e)
{
  var commissionSchedule = document.getElementById("commissionschedule");
  addEvent(commissionSchedule, 'keyup', setCounter, false);
}
 
function setCounter() {
    var charCounter = document.getElementById("charCounter");
    var commissionSchedule = document.getElementById("commissionschedule");
    var currentLength = commissionSchedule.value.length;
    var numCharsLeft = 1000 - currentLength;
    var htmlFrag = document.createTextNode("" + numCharsLeft + " characters left");
    while (charCounter.hasChildNodes())
        charCounter.removeChild(charCounter.lastChild);
    charCounter.appendChild(htmlFrag);
}
 
addEvent(window, 'load', addListeners, false);

Now, I've done this a dozen times before (with 'click', though, not 'keyup'), and never had a problem, but in this case, the setCounter function is never called in Firefox. In IE this works perfectly, updating #charCounter with the number of characters left on each keyup event. However, in FF, the setCounter event handler is never even called. I have checked, and setCounter IS getting attached to the onkeyup even handler for the textarea at page load, but never actually fires once the user begins typing.

Any idea? Thanks a ton!

[mrhoo]

Nothing wrong with your script, its the html- firefox is stricter than IE.
A label can only contain its control element and text. Try this:

[HTML]<p >
<label for="commissionschedule">Commission Schedule</label>
<span id="charCounter">1000 characters or less</span>
</p>
<textarea id="commissionschedule" rows="10" cols="40"></textarea>[/HTML]