Javascript funktioniert nicht, aber funktioniert gut, wenn Breakpoints setzen und klicken Sie auf die Datei von Chrom-Debugger-Tools

Question

So habe ich ein seltsames Problem konfrontiert. Ein Teil meines JavaScript-Codes, der eine Funktion ist, funktioniert nicht, aber wenn ich Breakpoints setze und auf die Datei klicke, nachdem ich zu Quellen in Chrome gegangen bin, fängt der Breakpoint an zu arbeiten und meine Javascript-Funktion läuft perfekt. (Ich kann die Ausgabe sehen.) mein Code. Bitte sagen Sie mir, warum ich mit diesem Problem konfrontiert bin?

HTML-Code .....

<textarea type="text" class="input-content" onchange="count(this)"></textarea> 
<p class="character-count"></p> 

Javascript

function count(char){ 
char.onkeyup = function() { 
     var text_max = 99; 
     var text_length = this.value.length; 
     var text_remaining = text_max - text_length; 
     char.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max; 
    } 
} 

Answer 1

Sie Zuweisung eines keyup Event-Handler in einem Onchange. Das wird nicht funktionieren, da onchange erst ausgelöst wird, wenn Sie das Feld verlassen. Führen Sie es im Fokus aus, aber fügen Sie keinen neuen Event-Handler hinzu, wenn dieser bereits vorhanden ist.

Hinweis: Ich habe den Inline-Ereignishandler entfernt, was keine gute Praxis ist. Ich wiederhole, weil ich annehme, dass Sie mehr als ein Feld haben, dem Sie den Zähler hinzufügen möchten.

function count(){ 
 
    if (!this.onkeyup) this.onkeyup = function() { 
 
     var text_max = 99; 
 
     var text_length = this.value.length; 
 
     var text_remaining = text_max - text_length; 
 
     this.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max; 
 
    } 
 
} 
 
window.onload=function() { 
 
    var msgs = document.querySelectorAll(".input-content"); 
 
    for (var i=0;i<msgs.length;i++) { 
 
    msgs[i].onfocus=count; 
 
    } 
 
}

<div><textarea type="text" class="input-content"></textarea> 
 
<p class="character-count"></p> 
 
</div>

Sie könnten dies tun alles onkeyup auf eigene statt

window.onload=function() { 
 
    var msgs = document.querySelectorAll(".input-content"); 
 
    for (var i=0;i<msgs.length;i++) { 
 
    msgs[i].onkeyup=function() { 
 
     var text_max = 99; 
 
     var text_length = this.value.length; 
 
     var text_remaining = text_max - text_length; 
 
     this.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max; 
 
    }; 
 
    } 
 
}

<div><textarea type="text" class="input-content"></textarea> 
 
<p class="character-count"></p> 
 
</div>

Answer 2

das onchange Ereignis nicht ausgelöst wird, bis Sie das Textfeld (es lassen verliert den Fokus).

Sie fügen bei Änderung auch einen Ereignishandler keyup falsch hinzu. Was passiert, ist, dass Sie jedes Mal, wenn Sie das Textfeld leeren, den Keyup-Handler ersetzen.

Ich denke, was Sie wollen, ist nur onkeyup auf dem Element zu verwenden, wie folgt aus:

function count(textareaElement){ 
 
     var text_max = 99; 
 
     var text_length = textareaElement.value.length; 
 
     var text_remaining = text_max - text_length; 
 
     textareaElement.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max; 
 

 
}

<textarea type="text" class="input-content" onkeyup="count(this)"></textarea> 
 
<p class="character-count"></p>