如果零件可以工作但未达到预期效果，为什么？

Question

这是一个打字速度测试程序。

当用户正确输入时，它应该是绿色的，当正确完成时，它应该是蓝色的，如果没有发生，它应该是红色的。

我知道问题出在

if

语句中，它可以工作，但不符合预期。

起初，它没有颜色，第一次输入时它会变成红色并保持红色，当输入字段（文本区域）被清理时，它会变成绿色并且无论如何都不会变成蓝色。

const inputArea = document.querySelector("#input-area");
const originText = document.querySelector("#example-text p").innerHTML;

var inputEmpty = true;
var interval;

function Start() {
  let inputTextLength = inputArea.value.length;

  if (inputTextLength == 0 && inputEmpty) {
    interval = setInterval(runTimer, 100);
    inputEmpty = false;
  }
}

function spellCheck() {
  let enteredText = inputArea.value;
  let originTextMatch = originText.substring(0, enteredText.length);

  if (enteredText == originText) {
    inputArea.style.boxShadow = "5px 5px blue";
    clearInterval(interval);
  } else if (enteredText == originTextMatch) {
    inputArea.style.boxShadow = "5px 5px green";
  } else {
    inputArea.style.boxShadow = "5px 5px red";
  }
}

inputArea.addEventListener("keypress", Start);
inputArea.addEventListener("keyup", spellCheck);

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

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

Answer 1

您不需要

if

语句本身。你应该简单地通过在 JS 中切换 CSS 类来添加边框，并给出一个条件

const inputArea = document.querySelector("#input-area");
const originText = document.querySelector("#example-text p").textContent;

let timer;

function startTyping() {
  clearTimeout(timer);
  noInputTimer();
  addBorder('typing');
}

function noInputTimer() {
  timer = setTimeout(checkText, 100);
}

function checkText() {
  addBorder((inputArea.value === originText) ? 'correct' : 'incorrect');
}

function addBorder(state) {
  inputArea.classList.toggle('typing', state === 'typing');
  inputArea.classList.toggle('finished-correctly', state === 'correct');
  inputArea.classList.toggle('finished-incorrectly', state === 'incorrect');
}

inputArea.addEventListener('input', startTyping);

.typing {
   outline: 5px solid green;
}

.finished-correctly {
   outline: 5px solid blue;
}

.finished-incorrectly {
  outline: 5px solid red;
}

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

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