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 之后的所有内容
最佳答案
这里有一些错误...
避免玩弄 innerHTML尽你所能地。 innerHTML作为 getter 将返回元素中的所有标记，作为 setter 将删除其中的所有节点。
对于您来说，这是一个问题，因为您确实更改了元素的innerHTML:在每个字符处，您都将下一个字母转换为 <span class="highlithed"> 。 。因此，当您检查字符 的索引时(空格)，您会找到您在此标记中添加的那个。
为避免这种情况，请使用 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>关于javascript - Javascript 突出显示问题 : changes differently，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55154741/