字符出现次数功能正常，但textarea总字符数统计失效问题求助

我在课程练习中需要实现两个功能：

• 统计textarea中的总字符数
• 统计指定字符在文本中的出现次数

目前指定字符出现次数统计功能可正常运行，但总字符数统计功能无法在网页中生效，相关代码如下：

JavaScript代码 #

let myText = document.getElementById("my-text");

myText.addEventListener("input", () => {
  let count = (myText.value).length;
  document.getElementById("count-result").textContent = `Character count: ${count}`;
});


function search() {
  var myText = document.getElementById("my-text").value;
  //console.log(textareaValue);

  var characterToSearch = document.getElementById("characterToFind").value;
  //console.log(characterToSearch);
  var count = 0;
  for (var i = 0; i < myText.length; i++) {
    if (characterToSearch == myText[i]) {
      count++;
    }
  }
  document.getElementById("totalCharacters").innerHTML = count;
}

HTML代码 #

<div class="container">
  <label>输入你想要的文本</label>
  <br>
  <textarea id="my-text" placeholder="输入文本"></textarea>
  <h1 id="count-result">Character Count: </h1>
  <br>
  <label>你想查找哪个字符？</label>
  <br>
  <textarea placeholder="添加你要查找的字符" id="characterToFind"></textarea>
  <br>
  <input type="button" onclick="search();" value="查找">
  <br>
  <label>重复次数 : </label><label id="totalCharacters"></label>
</div>

问题原因 #

总字符数统计失效的核心原因是JavaScript代码在DOM元素加载完成前就执行了。当浏览器执行let myText = document.getElementById("my-text");时，页面上的<textarea id="my-text">还未被加载，导致myText的值为null，无法绑定input事件，自然不会触发统计逻辑。

修复方案 #

有两种简单的修复方式：

方式1：将JS代码移到HTML末尾（</body>标签前） #

把JavaScript代码放在HTML的最后，确保浏览器先加载完所有DOM元素再执行JS：

<div class="container">
  <!-- 原HTML内容不变 -->
  <label>输入你想要的文本</label>
  <br>
  <textarea id="my-text" placeholder="输入文本"></textarea>
  <h1 id="count-result">字符数统计: </h1>
  <br>
  <label>你想查找哪个字符？</label>
  <br>
  <textarea placeholder="添加你要查找的字符" id="characterToFind"></textarea>
  <br>
  <input type="button" onclick="search();" value="查找">
  <br>
  <label>重复次数 : </label><label id="totalCharacters"></label>
</div>

<script>
let myText = document.getElementById("my-text");

myText.addEventListener("input", () => {
  let count = (myText.value).length;
  document.getElementById("count-result").textContent = `字符数统计: ${count}`;
});


function search() {
  var myText = document.getElementById("my-text").value;
  var characterToSearch = document.getElementById("characterToFind").value;
  var count = 0;
  for (var i = 0; i < myText.length; i++) {
    if (characterToSearch == myText[i]) {
      count++;
    }
  }
  document.getElementById("totalCharacters").innerHTML = count;
}
</script>
</body>

方式2：用DOMContentLoaded事件包裹初始化代码 #

通过监听DOMContentLoaded事件，确保DOM加载完成后再执行总字符数的初始化逻辑：

document.addEventListener('DOMContentLoaded', function() {
  let myText = document.getElementById("my-text");

  myText.addEventListener("input", () => {
    let count = (myText.value).length;
    document.getElementById("count-result").textContent = `字符数统计: ${count}`;
  });
});

// search函数可以保持原样，因为它是通过点击事件触发，此时DOM已加载完成
function search() {
  var myText = document.getElementById("my-text").value;
  var characterToSearch = document.getElementById("characterToFind").value;
  var count = 0;
  for (var i = 0; i < myText.length; i++) {
    if (characterToSearch == myText[i]) {
      count++;
    }
  }
  document.getElementById("totalCharacters").innerHTML = count;
}

额外优化建议 #

• 把英文提示改成中文，提升用户体验（已在修复代码中调整）
• characterToFind改用<input type="text">更合适，因为只需要输入单个字符，避免用户输入多行内容

内容的提问来源于stack exchange，提问作者daniel