Javascript: Etikettentext festlegen

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

Ich versuche, eine generische Funktion für ein Formular mit mehreren Feldern im folgenden Format zu implementieren.

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

Und das folgende 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;
}

Der erste Teil funktioniert gut, aber ich bin nicht in der Lage, den Wert charsleftvalue into the label in das Label einzustellen. Was mache ich falsch? Bitte beachten Sie, dass ich nach einem dynamischen Ansatz suche, anstatt den Etikettennamen hart in die JS-Funktion zu codieren. JQuery wäre zu :)


Lösung - vielen Dank an alle!

Antwort auf "Javascript: Etikettentext festlegen " 3 von antworten

InnerHTML sollte innerHTML sein:

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

Sie sollten Ihre checkLength function to your textarea with jQuery rather than calling it inline and rather intrusively: Funktion an Ihren Textbereich mit jQuery binden, anstatt sie inline und eher aufdringlich zu nennen:

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

Sie können checkLength mit mehr jQuery, und ich würde 'Objekt' nicht als formalen Parameter verwenden:

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

Wenn Sie also die oben genannten anwenden, können Sie Ihr Markup in::

<textarea name="text"></textarea>
ändern.

Für einen dynamischen Ansatz, wenn sich Ihre Beschriftungen immer vor Ihren Textbereichen befinden:

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

sie machen einige Dinge falsch. Die Erklärung folgt dem korrigierten Code:

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

Beachten Sie die Anführungszeichen um die 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;
}

Zuerst müssen Sie bei Ihrem Tastendruckereignis die Label-ID als Zeichenfolge senden, damit sie richtig gelesen werden kann. Zweitens hat InnerHTML einen Kleinbuchstaben i. Da Sie der Funktion die Zeichenfolgen-ID gesendet haben, können Sie das Element über diese ID abrufen.

Lassen Sie mich wissen, wie das für Sie funktioniert

EDIT Nicht, dass Sie implizit eine globale Variable erstellen, indem Sie charsleft nicht als var deklarieren. ein besserer Weg wäre, Folgendes zu tun, wenn sie in der Funktion deklariert wird:

var charsleft = ....