Question

<my_port>

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;
}

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

Answer 1

这里有一些错误...

尽量避免玩innerHTML。 innerHTML作为getter将返回Element中的所有标记，而作为setter则会删除其中的所有节点。

对您来说，这是一个问题，因为您确实更改了Element的innerHTML：在每个字符上，您都在转换下一个字母以将其键入为<span class="highlithed">。因此，当您检查字符（空格）的indexOf时，会发现确实在此标记中添加了一个。

为避免这种情况，请使用元素的textContent属性，该属性将忽略所有标记。
而且，不要使用indexOf来知道您的位置，当以前存在一个字符时，它仍然会失败。因此，只需使用您已经拥有的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>

Answer 2

您正在检查纯文本更改，并且没有考虑listen_addresses的位置。您应指定为文本，而不是listen_addresses = '*'。也许您应该将place解析为DOM元素，并改为获取其内部文本值。

Javascript的突出问题：变化有所不同

2 个答案: