如何修改输入框单词校验代码：将Alert替换为innerHTML错误提示

步骤1：添加错误提示容器 #

在页面的文本框（id为txt的textarea）附近，新增一个用于显示错误信息的元素，示例如下：

<textarea id="txt"></textarea>
<!-- 新增错误提示容器 -->
<div id="errorMsg" style="color: #dc3545; margin-top: 8px;"></div>
<button onclick="myFunction()">校验单词数</button>

步骤2：修改JavaScript代码 #

调整原代码，移除alert逻辑，改为操作错误容器的innerHTML，同时修复原代码未声明变量导致的全局污染问题：

function wordCount(text) {
  let totalCount = 0;
  const words = text.split(' ');
  words.forEach(function(word) {
    if (word.trim().length > 0) { // 改用trim()，避免连续空格被误统计为单词
      totalCount++;
    }
  });
  return totalCount;
}

window.myFunction = function() {
  const textarea = document.getElementById('txt');
  const errorMsg = document.getElementById('errorMsg');
  const wordCountResult = wordCount(textarea.value);
  
  if (wordCountResult < 7 || wordCountResult > 12) {
    errorMsg.innerHTML = 'Wrong number of words'; // 渲染错误信息
  } else {
    errorMsg.innerHTML = ''; // 符合要求时清空错误提示
  }
}

关键修改说明 #

• 给所有变量添加let/const声明，避免全局变量泄漏
• 优化单词统计逻辑，用trim()过滤纯空格的"假单词"
• 通过错误容器的innerHTML控制提示内容，符合需求同时优化用户体验
• 新增正确场景下的清空逻辑，避免错误信息残留

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