HTML文本框单词计数JavaScript函数无法运行求助

原代码存在的核心问题 #

• 获取textarea元素时错误取了innerHTML，应该直接获取DOM元素本身，否则无法绑定事件
• HTML中onkeyup="textarea()"调用的函数不存在，且变量名与调用名冲突
• 结果赋值逻辑颠倒，同时缺少用于显示计数的wordcount元素
• 单词分割逻辑有缺陷，无法处理多个连续空格的情况

修正后的完整代码 #

HTML部分

<p>
  <textarea id="myWordsToCount" rows="5" cols="60"></textarea><br>
  单词数：<span id="wordcount">0</span>
</p>

JavaScript部分

// 获取textarea元素和计数显示元素
const textarea = document.getElementById("myWordsToCount");
const wordCountEl = document.getElementById("wordcount");

// 定义单词统计函数
function countWords() {
  const inputText = textarea.value.trim();
  
  // 处理空输入的情况
  if (!inputText) {
    wordCountEl.textContent = "0";
    return;
  }
  
  // 用正则分割所有连续空白字符（含空格、换行等）
  const words = inputText.split(/\s+/);
  // 统计有效单词数量
  const count = words.length;
  
  // 将结果更新到页面
  wordCountEl.textContent = count;
}

// 绑定事件：键盘抬起、输入变化时触发统计
textarea.addEventListener("keyup", countWords);
textarea.addEventListener("input", countWords);

关键修正说明 #

• 直接获取DOM元素而非innerHTML，确保事件能绑定到正确对象上
• 给统计函数起明确名称countWords，避免变量名冲突
• 添加wordcount元素用于展示结果，使用textContent更新非表单元素的内容
• 用trim()清除输入首尾空格，结合正则/\s+/分割所有连续空白，更准确统计单词数
• 使用addEventListener绑定事件，支持同时绑定keyup和input事件，覆盖键盘输入、粘贴等所有输入场景

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