突出显示JavaScript的问题:更改方式不同

var wordsToBeTyped = document.querySelector('h2').innerHTML.split('');
var place = 0;
var wrong = 0;
var correct = 0;
document.onkeydown = function(event) {
  if (event.key === wordsToBeTyped[place]) {
    correct = correct + 1;
    place = place + 1;
    document.getElementById('correct').innerHTML = 'Correct: You have ' + correct + ' correct!'
  } else {
    wrong = wrong + 1;
    document.getElementById('wrong').innerHTML = 'Wrong: You have ' + wrong + ' wrong'
    document.body.style.backgroundColor = 'red';
    setTimeout(function() {
      document.body.style.backgroundColor = 'skyblue'
    }, 500)
  }
  highlight(wordsToBeTyped[place])
}
highlight(wordsToBeTyped[place])
function highlight(text) {
  var inputText = document.querySelector('#checking');
  var innerHTML = inputText.innerHTML;
  var index = innerHTML.indexOf(text);
  if (index >= 0) {
    innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
    inputText.innerHTML = innerHTML;
  }
}

h3 {
  display: inline-block;
}
body {
  background-color: skyblue;
  text-align: center;
}
.highlight {
  background: yellow;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="google" content="notranslate">
  <title>Typing Accuracy Test</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>Typing Accuracy Test</h1>
  <h2 id="checking">lorem ipsum dolor sit amet, tritani debitis ea ius, nostrud albucius vis eu. civibus consequuntur cum ut, te albucius accusamus per, illum nominati temporibus nec eu. adversarium efficiantur ei qui. at vix falli tollit. an graece vituperata vix, iusto
    primis ponderum id eum, delenit definiebas vix in.</h2>
  <h3 id="correct"></h3>
  <h3 id="wrong"></h3>
  <script src="script.js"></script>
</body>
</html>

此代码应该运行并突出显示您到目前为止输入的内容。但是，在向M键入M之后，它只是显示了跨度，而不是突出显示它。这很烦人，我试图将文本更改为没有空间，但这也不起作用。上面是我的代码。谢谢。它突出显示了M

之后的所有内容

这里有几个错误...

避免尽可能多地玩innerHTML。innerHTML作为GETER将返回您元素中的所有标记，并且作为设置者将删除其中的所有节点。

对您来说，这是一个问题，因为您确实会更改元素的InterHTML：在每个字符上，您都将下一个字母转换为 <span class="highlithed">。因此，当您检查字符（space）的索引时，您会发现在此标记中添加的索引。

要避免这种情况，请使用元素的indexOf属性，它将无视所有标记。
但是，不要使用place来知道您的位置，当角色以前存在时，它仍然会失败。因此，只需使用您已经拥有的place计数器。

// grab textContent
var wordsToBeTyped = document.querySelector('h2').textContent.split('');
var place = 0;
var wrong = 0;
var correct = 0;
document.onkeydown = function(event) {
  event.preventDefault();
  if (event.key === wordsToBeTyped[place]) {
    correct = correct + 1;
    place = place + 1;
    // set textContent
    document.getElementById('correct').textContent = 'Correct: You have ' + correct + ' correct!'
  } else {
    wrong = wrong + 1;
    // set textContent
    document.getElementById('wrong').textContent = 'Wrong: You have ' + wrong + ' wrong'
    document.body.style.backgroundColor = 'red';
    setTimeout(function() {
      document.body.style.backgroundColor = 'skyblue'
    }, 500)
  }
  highlight(wordsToBeTyped[place])
}
highlight(wordsToBeTyped[place])
function highlight(text) {
  var inputText = document.querySelector('#checking');
  // grab textContent
  var innerText = inputText.textContent;
  if (place >= 0) {
    innerText = "<span class='highlight'>" + innerText.substring(0, place) + innerText.substring(place, place + text.length) + "</span>" + innerText.substring(place + text.length);
    // here you can set innerHTML
    inputText.innerHTML = innerText;
  }
}

h3 {
  display: inline-block;
}
body {
  background-color: skyblue;
  text-align: center;
}
.highlight {
  background: yellow;
}

<h1>Typing Accuracy Test</h1>
<h2 id="checking">lorem ipsum dolor sit amet, tritani debitis ea ius, nostrud albucius vis eu. civibus consequuntur cum ut, te albucius accusamus per, illum nominati temporibus nec eu. adversarium efficiantur ei qui. at vix falli tollit. an graece vituperata vix, iusto
  primis ponderum id eum, delenit definiebas vix in.</h2>
<h3 id="correct"></h3>
<h3 id="wrong"></h3>

您正在检查纯文本更改，并且您没有考虑到innerHTML的位置。您应该指定为文本，而不是wordsToBeTyped。也许您应该将CC_10作为DOM元素解析，然后抓住其内部文本值。

相关内容

最新更新

热门标签：