你好，我目前正在制作一款打字游戏。我有两个变量。第一个是用户需要输入的文本。第二个是用户当前必须输入的文本。我已经能够做到这一点，以便程序可以检测两个变量是否相等。而且当到目前为止的文本等于他们需要写的文本时。例如，如果您需要输入“test”，而您只输入了“te”，它仍然会被认为是正确的。因为到目前为止你还没有犯过任何错误。无论如何，我希望单个字母/字符在正确或不正确时突出显示。因为目前它只会突出显示整个单词。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- The line below is for CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div><span class="text-to-type">Just some sample text.</span></div>
<textarea class="text-box" rows="8" cols="55" oninput="run()"></textarea>
<!-- The line below is for JavaScript -->
<script src="index.js"></script>
</body>
</html>
JavaScript
// Variables
let textBox = document.getElementsByClassName("text-box")[0];
let textShownInWebPage = document.getElementsByClassName("text-to-type")[0];
let typedValue;
let typedValueArray;
let displayText = "Just some sample text."
let characterArray = displayText.split("");
let i;
const run = () => {
typedValue = textBox.value;
let isCorrect = true;
for (i = 0; i < typedValue.length; i++) {
if (typedValue[i] !== displayText[i]) {
isCorrect = false;
break;
}
}
if (isCorrect) {
console.log("correct");
textShownInWebPage.style.backgroundColor = "#f0290e";
} else {
console.log("incorrect");
textShownInWebPage.style.backgroundColor = "#eb2323";
}
};
我尝试过使用这行代码，但它只会创建错误消息，我不确定为什么。
textShownInWebPage[i].style.backgroundColor = "#eb2323";您可以在代码中使用
oninput<input type="text" oninput="myFunction()">