Javascript: текст меток

Я пытаюсь реализовать общую функцию для формы с несколькими полями в следующем формате.

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

И следующий 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;
}

Первая часть работает отлично, но я не могу установить значение charsleft в метку. Что я делаю не так? Обратите внимание, что я ищу динамический подход вместо жесткого кодирования имени метки в функции JS. JQuery тоже будет хорошо:)

Решение - благодаря всем!

HTML

<label id="LblTextCount"></label>
<textarea name="text">
</textarea>

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

Ответ 1

InnerHTML должен быть innerHTML:

document.getElementById('LblAboutMeCount').innerHTML = charsleft;

Вы должны привязать свою функцию checkLength к вашему текстовому пространству с помощью jQuery, а не называть его встроенным и довольно навязчивым:

$(document).ready(function() {
    $('textarea[name=text]').keypress(function(e) {
        checkLength($(this),512,$('#LblTextCount'));
    }).focus(function() {
        checkLength($(this),512,$('#LblTextCount'));
    });
});

Вы можете очистить checkLength, используя больше jQuery, и я бы не использовал 'object' как формальный параметр:

function checkLength(obj, maxlength, label) {
    charsleft = (maxlength - obj.val().length);
    // never allow to exceed the specified limit
    if( charsleft < 0 ) {
        obj.val(obj.val().substring(0, maxlength-1));
    }
    // I'm trying to set the value of charsleft into the label
    label.text(charsleft);
    $('#LblAboutMeCount').html(charsleft);
}

Итак, если вы примените вышеуказанное, вы можете изменить свою разметку на:

<textarea name="text"></textarea>

Ответ 2

вы делаете несколько вещей не так. Объяснение следует за скорректированным кодом:

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

Обратите внимание на цитаты вокруг идентификатора.

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

Во-первых, на вашем мероприятии с нажатием клавиши вам нужно отправить идентификатор метки в виде строки, чтобы она читалась правильно. Во-вторых, InnerHTML имеет строчный регистр i. Наконец, поскольку вы отправили функцию идентификатор строки, вы можете получить элемент по этому идентификатору.

Сообщите мне, как это работает для вас.

EDIT Не то, что не объявляя charsleft как var, вы неявно создаете глобальную переменную. лучшим способом было бы сделать следующее при объявлении его в функции:

var charsleft = ....

Ответ 3

Для динамического подхода, если ваши метки всегда находятся перед вашими текстовыми областями:

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