实现textarea字符数实时显示时遭遇Uncaught TypeError错误

你的代码里有三个关键错误导致了这个TypeError：

• 错误1：元素选择器使用不当
  document.querySelector(".word-counter")返回的是单个DOM元素，不是数组，不能用[0]来访问。如果页面中只有一个.word-counter元素，直接去掉[0]即可；如果有多个，改用document.querySelectorAll(".word-counter")[0]来获取第一个匹配元素。

• 错误2：事件监听绑定错误
  prompt.addEventListener("input", updateCount())里的updateCount()会立即执行函数，而不是把函数作为事件回调传入。应该去掉括号，写成prompt.addEventListener("input", updateCount)，这样函数才会在用户输入时触发。

• 错误3：this指向问题
  当你直接执行updateCount()时，this指向的是全局对象（浏览器里是window），而不是textarea元素，所以this.value会是undefined。更稳妥的方式是直接使用prompt.value来获取输入内容，避免this指向混乱。

修复后的完整代码：

const prompt = document.querySelector("#floatingTextarea2");
// 修正元素选择
const wordCount = document.querySelector(".word-counter");

// 修正事件绑定，去掉函数括号
prompt.addEventListener("input", updateCount);

function updateCount() {
  // 改用prompt.value获取输入内容
  const count = prompt.value.length;
  console.log(count);
  wordCount.innerText = count;
}

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