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>