PROSAGA码农传奇-html/HTML5-使用Javascript突出显示问题：更改方式不同

<div class =“post-text”itemprop =“text”>
  <P>
    这里有一些错误......
  </p>
  <P>
    避免玩
     <code>
      innerHTML
    </code>
     尽你所能地。
     <code>
      innerHTML
    </code>
     因为getter将返回Element中的所有标记，并且作为setter将删除其中的所有节点。
  </p>
  <P>
    对你而言，这是一个问题，因为你确实改变了你的元素的innerHTML：在每个角色，你要转换下一个字母作为一个类型
     <code>
      <span class="highlithed">
    </code>
    。所以当你检查indexOf字符时
     <code/>
     (space), you find the one you did add in this markup.
  </p>
  <p>
    To avoid that, use the 
    <code>
      textContent
    </code>
     您的元素的属性，将忽略所有标记。
    <BR/>
    
但是，也不要使用
     <code>
      indexOf
    </code>
     要知道你在哪里，当一个角色出现之前它仍然会失败。所以简单地使用
     <code>
      place
    </code>
     反击你已经有了。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          // 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])

body {
  background-color: skyblue;
  text-align: center;
}

.highlight {
  background: yellow;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>