Javascript 如何用颜色突出显示单词？

在按下空格键（如果输入不正确）后，我想突出显示“div”中的红色单词，如果正确，则突出显示绿色单词。在我的实现中，我得到一个错误：“uncaughtreferenceerror:I未定义”

var arr=[]；
var i=0；
window.onload=函数（）{
var text=document.getElementById（“text”）；
txt=text.textContent | | text.innerText；
arr=txt.split（“”）；
控制台日志（arr）；
//警报（txt.substring（0,3））；
};
函数getChar（e）{
if（event.which==32）{
如果（e.value==arr[i]）{
i++；
document.getElementById（'form'）.reset（）；
event.preventDefault（）；
}
}
}

Lorem ipsum dolor sit amet，奉献精英。阿普雷亚姆康茂德酒店
在劳动分子中，身体和精神的消耗是不可能的！
福加建筑事务所。

正如错误所提示的，在使用i之前，您没有在任何地方定义i-确保在将其用作索引之前定义它，例如在循环之前只编写

i=0

。

有很多代码无法使用

• 您不应该在事件处理程序上使用html。每个人都会告诉你“是的，你可以”——我在这里告诉你，你当然可以！但是你不应该这样做。为什么？我向您保证，在维护代码和处理事件对象之类的事情时，您将遇到更多的问题。或者使用

  addEventListener

  ——这使您能够通过JavaScript代码管理侦听器，并进一步向同一元素添加多个事件。它还使您能够使用诸如事件委派之类的奇特功能，这将在某些情况下节省您的时间。这是一个100%的进步，任何人说，否则是新的或疯狂
• 您需要使用

  i

  对数组进行迭代。这意味着您不能在代码开始时将其声明为0，而只是在按下空格键时将其递增
• 无法为文本节点着色。这意味着任何未单独由单个元素包装的自由格式文本都不可用于样式。我们通过创建一个函数来处理这个问题，该函数将用一个跨度来包装每个单词。另一方面，您已经将文本内容转换为一个数组，因此我们可以将其传入，进行转换，然后将其吐出并附加到DOM中。这相当简单。我们使用了一个

  DocumentFragment

  ，听起来就是这样。一块页面，您可以在后台添加元素和文本，然后一次对DOM进行处理
• 您正在DOM中存储数据。不应通过从DOM中删除文本来接收要分析的初始文本。这应该手动输入到代码中，然后从那里呈现到DOM中。在下面的示例中，它不是在对象中设置的，也不是在任何花哨的东西中设置的，但是将来您应该考虑在对象中存储数据-为什么？因此，如果需要使用这些数据进行更改，那么操作和更改就更容易了1000倍
• 我假设您剪切并粘贴事件以进行键盘检查<代码>e。不推荐使用该代码

  e.key

  是新标准。我们通常可以检查特定的关键字符，而不是检查代码。
  • 当您输入文本并按下空格键时，它将搜索与您输入的文本相关的文本
  • 它将所选的

    类添加到此文本中。这里没有删除该类的代码，我也不打算提供它，因为这是一个非常大的问题
    

您所要求的范围比我认为您预期的要大得多，也比我预期的要大得多，因此我为您提供了足够的代码，让您开始使用荧光灯，但将其他跨距更改为不同的颜色完全取决于您，因为我觉得我在这个示例中已经演示了很多。如果你不明白，继续努力，你会明白的

var arr=[]；
window.onload=函数（）{
var text=document.getElementById（“text”）；
arr=“Lorem ipsum dolor sit amet，是一位杰出的建筑设计师。他是一名建筑设计师，他是一名建筑设计师，他是一名建筑设计师，他是一名建筑设计师；
appendChild（wrapWithSpans（arr））；
var textbox=document.getElementById（“文本输入”）；
textbox.addEventListener（“向下键”，函数（e）{
getChar（e）
});
};
函数范围（arr）{
设df=document.createDocumentFragment（）；
arr.forEach（节点=>{
设span=document.createElement（“span”）；
span.textContent=节点+“”；
依附儿童（span）；
});
返回df；
}
函数getChar（e）{
让text=document.querySelector（“#text”），
span=Array.from（text.querySelectorAll（“span”）；
如果（e.key==“”）{
为了（让我进来）{
如果（e.currentTarget.value==arr[i]）{
span.find（函数（节点）{
返回node.textContent.slice（0，-1）==arr[i]；
}).classList.add（“选定”）；
document.getElementById（'form'）.reset（）；
event.preventDefault（）；
}
}
}
}

。已选定{
颜色：绿色；
}

什么是

i

？它还不清楚，也不清楚它必须做什么。很明显，他想用它作为数组的迭代索引-不管怎样，你可以在不知道

i

doesry做了什么的情况下解决错误：）@IgorShvets你不能给一个词着色，你需要这样做：OP did，正如你所看到的，当我们得到所有的代码，因此这个答案现在是没有价值的。在发布答案之前，请始终等待这些小问题被清除。