I'm trying to implement a generic function for a form with several fields in the following format.

<label id=LblTextCount></label>

<textarea name=text onKeyPress=checkLength(this, 512, LblTextCount)>

</textarea>

And the following JavaScript:

function checkLength(object, maxlength, label) {

    charsleft = (maxlength - object.value.length);



    // never allow to exceed the specified limit

    if( charsleft < 0 ) {

        object.value = object.value.substring(0, maxlength-1);

    }



    // I'm trying to set the value of charsleft into the label

label.innerText = charsleft;

    document.getElementById('LblTextCount').InnerHTML = charsleft;

}

The first part works fine, but I'm not able to set the charsleftvalue into the label. What am I doing wrong?
Please note that I'm looking for a dynamic approach instead of hard coding the label name into the JS function. JQuery would be fine too :)

HTML

<label id=LblTextCount></label>

<textarea name=text>

</textarea>

JS

$(document).ready(function() {

    $('textarea[name=text]').keypress(function(e) {

        checkLength($(this),512,$('#LblTextCount'));

    }).focus(function() {

        checkLength($(this),512,$('#LblTextCount'));

    });

});



function checkLength(obj, maxlength, label) {

    var charsleft = (maxlength - obj.val().length);



    // never allow to exceed the specified limit

    if( charsleft < 0 ) {

        obj.val(obj.val().substring(0, maxlength-1));

    }



    // set the value of charsleft into the label

    $(label).html(charsleft);

}