Javascript不起作用，但是在放置斷點並從chrome調試器工具中單擊文件時可以正常工作

Question

所以我面臨一個奇怪的問題。 我的javascript代碼的一部分是函數不起作用，但是當我在chrome中找到斷點並放下斷點並單擊文件時，斷點開始工作並且我的Javascript函數運行完美。（我可以看到輸出。）這是我的代碼。 請告訴我為什么面對這個問題？

HTML代碼.....

<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

您將在onchange中分配keyup事件處理程序。 這將不起作用，因為在離開該字段之前onchange不會觸發。 重點關注它，但是如果已有事件處理程序，則不要添加它。

注意我刪除了內聯事件處理程序，這不是一個好習慣。 之所以循環，是因為我假設您可能有多個要添加計數器的字段。

 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> 

您可以單獨執行所有這些onkeyup

 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

在您離開文本區域之前，不會觸發onchange事件（它會失去焦點）。

您還錯誤地在更改時添加了keyup事件處理程序。 所以發生的事情是，每當您使文本區域失去焦點時，您都​​將替換keyup處理程序。

我認為您想要的只是在元素上使用onkeyup ，如下所示：

 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>