Javascript: ustaw tekst etykiety

Question

Próbuję zaimplementować ogólną funkcję formularza z kilkoma polami w następującym formacie.

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

I następujące 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; 
} 

Pierwsza część działa dobrze, ale jestem nie mógł ustawić wartość charsleft na etykiecie. Co ja robię źle? Należy zauważyć, że szukam dynamicznego podejścia zamiast twardego kodowania nazwy etykiety w funkcji JS. JQuery byłoby też dobrze :)

---

Rozwiązanie - dzięki wszystkim!

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 powinny być innerHTML:

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

Należy związać swoją funkcję checkLength do textarea z jQuery zamiast nazywając ją inline, a raczej uciążliwie:

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

Można neaten się checkLength za pomocą jQuery więcej, a ja nie użyłby „obiekt” jako parametru formalnego:

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

Więc jeśli stosuje się wyżej, można zmienić znaczników do:

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

Answer 2

Dla dynamicznego podejścia, jeśli etykiety są zawsze przed swoimi obszarami tekstem:

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

Answer 3

robisz kilka rzeczy źle. Wyjaśnienie jest następujące po korygowanym kodzie:

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

Uwaga notowania wokół identyfikatora.

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

Najpierw, w kluczowym wydaniu prasowym, należy wysłać identyfikator etykiety jako ciąg znaków, aby mógł zostać odczytany poprawnie. Po drugie, InnerHTML ma małą literę i. Wreszcie, ponieważ wysłałeś funkcję identyfikator ciągu, możesz uzyskać element o tym id.

Daj mi znać, jak to działa dla ciebie

EDIT Nie, że nie deklarując charsleft jako var, jesteś pośrednio tworząc zmienną globalną. lepszym sposobem byłoby wykonać następujące czynności podczas deklarowania go w funkcję:

var charsleft = ....