使用 JavaScript、HTML 和 CSS 突出显示单词答案

【问题标题】：Highlighting a word using JavaScript, HTML, and CSS使用 JavaScript、HTML 和 CSS 突出显示单词
【发布时间】：2021-01-23 06:31:41
【问题描述】：

我一直在尝试制作一个打字测试网站，并且几乎完成了。我需要做的最后一件事是突出显示用户正在输入的单词。例如：如果报价是“hello world”并且用户正在打招呼；你好应该突出显示。我在网上真的找不到任何东西。代码如下：

var input = document.getElementById("boch");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 32) {
    event.preventDefault();
    document.getElementById("bocho").click();
  }
});

div {
  text-align: center;
}

body {
  text-align: center;
}

input[type=text] {
  width: 100%;
  padding: 1%;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

div {
  height: 10em;
  position: relative
}

html {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

body {
  background: linear-gradient(-20deg, #e73c7e, #23a6d5, #23d5ab);
  background-size: 1000000% 1000000%;
}

button {
  margin-left: auto;
  margin-right: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100px
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
</head>
<h1>
  bocho is cool
</h1>

</div>
<div id="typing-area">
  <input type="text" id="boch">
  <button id="bocho" onclick="document.getElementById('boch').value = ''">Enter</button>

</html>

我将只使用“Bocho 很酷”这句话，所以应该突出显示。

【问题讨论】：

我真的没有得到您需要的东西，如果将段落中的单词（区分大小写）写入文本框中，您的意思是要突出显示该单词吗？
是的。这就是我的意思
在他们正确输入并按下空格之前，该单词是否突出显示？如果他们打错了怎么办？
如果他们输入错误，突出显示应该变成红色。
我的处理方法是在一个数组中按字符输入句子，然后使用 onkeypress 事件触发检查功能<input type="text" onkeypress="checkFunction()">。此函数将在每次按键后触发，并检查用户按键是否等于字符数组的索引，如果您可以使用 js 更改 css 样式。示例：geeksforgeeks.org/…

标签： javascript html css web

【解决方案1】：

我创建了一个带有沙盒的新版本供您使用。这个版本应该可以正常工作

您可以点击下面的“运行代码sn-p”进行测试

var element = document.querySelector("#boch");

element.onkeyup = function() {
  var value = element.value;

 if(value.includes("bocho")) {
    document.getElementById('word-1').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-1').style.backgroundColor = 'white';
  }

  if(value.includes("bocho is")) {
    document.getElementById('word-2').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-2').style.backgroundColor = 'white';
  }

  if(value.includes("bocho is cool")) {
    document.getElementById('word-3').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-3').style.backgroundColor = 'white';
  }
  
}

<h1>
   <span id="word-1">bocho</span> <span id="word-2">is</span> <span id="word-3">cool</span>
</h1>

<input type="text" id="boch">

【讨论】：