Javascript: set label text

Question

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

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

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

Answer 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, и я бы не использовать «объект» в качестве формального параметра:

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> 

Answer 2

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

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

Answer 3

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

<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 charsleft = ....