打字速度测试程序if语句逻辑异常：颜色显示不符合预期求助

问题症状 #

• 初始状态输入框无颜色，首次输入后直接变红且一直保持红色
• 清空输入框后变为绿色，无论怎么输入都不会触发完全正确的蓝色样式

问题根源 #

1. 目标文本获取错误：用innerHTML获取<p>内容时，会包含HTML中的隐性换行或空白字符，导致输入的文本和目标文本永远无法完全匹配，蓝色样式永远触发不了
2. 空输入判断缺失：清空输入框时，空字符串和originText.substring(0,0)（也是空字符串）匹配，触发了绿色样式，但初始状态应该无颜色
3. 计时器触发时机错位：keypress事件在字符插入到输入框前触发，导致Start里的长度判断逻辑不准确

修复后的代码 #

JavaScript部分

const inputArea = document.querySelector("#input-area");
// 改用textContent获取纯文本，避免HTML空白干扰
const originText = document.querySelector("#example-text p").textContent.trim();

var inputEmpty = true;
var interval;

// 模拟runTimer函数，原代码未给出实现
function runTimer() {
  // 这里可以添加计时器逻辑，比如更新显示时间
}

function Start() {
  // 调整计时器启动逻辑：当输入从空变为非空时启动
  if (inputEmpty && inputArea.value.length === 1) {
    interval = setInterval(runTimer, 100);
    inputEmpty = false;
  }
}

function spellCheck() {
  let enteredText = inputArea.value;
  
  // 先处理空输入的情况，恢复初始无样式
  if (enteredText.length === 0) {
    inputArea.style.boxShadow = "";
    inputEmpty = true;
    clearInterval(interval);
    return;
  }

  let originTextMatch = originText.substring(0, enteredText.length);

  if (enteredText === originText) {
    inputArea.style.boxShadow = "0 0 5px blue"; // 调整阴影样式让颜色更明显
    clearInterval(interval);
  } else if (enteredText === originTextMatch) {
    inputArea.style.boxShadow = "0 0 5px green";
  } else {
    inputArea.style.boxShadow = "0 0 5px red";
  }
}

inputArea.addEventListener("keyup", Start); // 改用keyup启动计时器，确保长度判断准确
inputArea.addEventListener("keyup", spellCheck);

HTML部分（保持原结构）

<div id="example-text">
  <h2>header</h2>
  <p>This is an example text</p>
</div>

<textarea id="input-area" name="text-area"></textarea>

修复说明 #

• 用textContent.trim()获取目标文本，确保拿到的是纯文本内容，去掉多余空白
• 增加空输入判断，清空时恢复输入框初始样式，重置计时器状态
• 把Start的触发事件改成keyup，保证输入长度判断准确
• 调整阴影样式为0 0 5px color，让颜色显示更直观（原样式的5px 5px阴影偏位，颜色不明显）

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