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>