[javascript] Javascript: set label text

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 :)


Solution - thanks to all!

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

This question is related to javascript

The answer is


For a dynamic approach, if your labels are always in front of your text areas:

$(object).prev("label").text(charsleft);

you are doing several things wrong. The explanation follows the corrected code:

<label id="LblTextCount"></label>
<textarea name="text" onKeyPress="checkLength(this, 512, 'LblTextCount')">
</textarea>

Note the quotes around the id.

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

    // set the value of charsleft into the label
    document.getElementById(label).innerHTML = charsleft;
}

First, on your key press event you need to send the label id as a string for it to read correctly. Second, InnerHTML has a lowercase i. Lastly, because you sent the function the string id you can get the element by that id.

Let me know how that works out for you

EDIT Not that by not declaring charsleft as a var, you are implicitly creating a global variable. a better way would be to do the following when declaring it in the function:

var charsleft = ....