Code Not Working in Firefox: keyup event

[jayturley]

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

[HTML]<label for="commission schedule">
Commission Schedule<br />
<span id="charCounter ">1000 characters or less</span>
</label>
<textarea id="commissions chedule" 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:

[CODE=JAVASCRIPT]function addEvent(elm, evType, fn, useCapture)
// cross browser event handling
{
if (elm.addEventLi stener)
{
elm.addEventLis tener(evType, fn, useCapture);
return true;
} else if (elm.attachEven t)
{
var r = elm.attachEvent ('on' + evType, fn);
return r;
} else
{
elm['on' + evType] = fn;
}
}

function addListeners(e)
{
var commissionSched ule = document.getEle mentById("commi ssionschedule") ;
addEvent(commis sionSchedule, 'keyup', setCounter, false);
}

function setCounter() {
var charCounter = document.getEle mentById("charC ounter");
var commissionSched ule = document.getEle mentById("commi ssionschedule") ;
var currentLength = commissionSched ule.value.lengt h;
var numCharsLeft = 1000 - currentLength;
var htmlFrag = document.create TextNode("" + numCharsLeft + " characters left");
while (charCounter.ha sChildNodes())
charCounter.rem oveChild(charCo unter.lastChild );
charCounter.app endChild(htmlFr ag);
}

addEvent(window , 'load', addListeners, false);[/CODE]

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="commission schedule">Commi ssion Schedule</label>
<span id="charCounter ">1000 characters or less</span>
</p>
<textarea id="commissions chedule" rows="10" cols="40"></textarea>[/HTML]