Question

我想在“ div”中用红色突出显示该单词，如果没有从输入中正确输入，请按空格键，如果正确则按绿色。在我的实现中，出现错误：“未捕获的ReferenceError：未定义”

    var arr = [];
    var i = 0;
window.onload = function () {
    var text = document.getElementById("text");
    txt = text.textContent || text.innerText;
    arr = txt.split(' ');
    console.log(arr);
    //alert(txt.substring(0,3));
};

function getChar(e) {
    if (event.which == 32) {
        if (e.value == arr[i]) {
            i++;
            document.getElementById('form').reset();
            event.preventDefault();
        }
    }
}

<div id="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aperiam commodi
    consequatur corporis cum dolores eaque in labore molestias nam odio optio quas, quis voluptates!
    Architecto fuga impedit voluptatum.
</div>      
<form action="" id="form">
    <input type="text" id="text_input" onkeydown="getChar(this);">
</form>

Answer 1

很多与您的代码不兼容。

您不应使用html事件处理程序。每个人都会告诉您“ 是可以”-我在这里告诉您您肯定可以！但您不应该。为什么？我向您保证，您将在维护代码和执行诸如处理事件对象之类的操作时遇到更多问题。或者使用addEventListener-这使您能够通过JavaScript代码管理侦听器，并且还可以将多个事件添加到同一元素。它还使您能够使用事件委派之类的奇特功能，在某些情况下可以节省您的时间。这样做是100％的改进，否则任何人说的都是新的或疯狂的。
您需要使用i遍历数组。这意味着您不能在代码开头将其声明为0，而只要在按下空格键时就将其递增即可。
您不能为文本节点着色。这意味着任何未由单个元素单独包装的自由格式文本均无法设置样式。我们通过创建一个将每个单词都用跨距换行的函数来解决这个问题。从好的方面来说，您已经将文本内容转换为数组，因此我们可以将其传递进去，进行转换，然后将其吐出以附加到DOM。这很简单。我们使用DocumentFragment，听起来就是这样。您可以在页面的大块后面添加元素和文本，然后立即在DOM上添加所有内容。
您正在将数据存储在DOM中。通过将文本从DOM上刮下来，不应接收到要分析的初始文本。应该将其手动输入到您的代码中，然后从那里渲染到DOM。在下面的示例中，它不是在对象中设置的，也不是任何奇特的东西，但是在将来，您应该查看将数据存储在对象中-为什么？这样一来，如果需要使用该数据进行更改，则操作和更改的难度将提高1000倍。
我假设您剪切并粘贴了该事件以进行键盘检查。 e.which已过时。 e.key是新标准。除了检查代码外，我们通常可以检查特定的关键字符。
- 输入文本并按下空格键时，它将搜索相对于您输入的文本的文本。
- 它将selected类添加到此文本。这里没有删除该类的代码，因为这是一个很大的问题，所以我不打算提供它。

您要问的范围比我想像的要大得多，并且比我想像的要大得多，因此，我为您提供了足够的代码以使您开始使用有效的荧光笔，但是不断变化其他跨度到另一种颜色完全取决于您，因为我觉得在此示例中我已经展示了很多。如果您不理解它，请继续努力，一定会得到它。

var arr = [];
window.onload = function() {
  var text = document.getElementById("text");
  arr = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aperiam commodi consequatur corporis cum dolores eaque in labore molestias nam odio optio quas, quis voluptates! Architecto fuga impedit voluptatum.".split(' ');
  text.appendChild(wrapWithSpans(arr));
  var textbox = document.getElementById("text_input");
  textbox.addEventListener("keydown", function(e) {
    getChar(e)
  });
};

function wrapWithSpans(arr) {
  let df = document.createDocumentFragment();
  arr.forEach(node => {
    let span = document.createElement("span");
    span.textContent = node + " ";
    df.appendChild(span);
  });
  return df;
}

function getChar(e) {
  let text = document.querySelector("#text"),
    spans = Array.from(text.querySelectorAll("span"));


  if (e.key == " ") {
    for (let i in arr) {
      if (e.currentTarget.value == arr[i]) {

        spans.find(function(node) {
          return node.textContent.slice(0, -1) == arr[i];
        }).classList.add("selected");
        document.getElementById('form').reset();
        event.preventDefault();
      }
    }
  }
}

.selected {
  color: green;
}

<div id="text">

</div>
<form action="" id="form">
  <input type="text" id="text_input">
</form>

Answer 2

正如错误所暗示的那样，在使用它之前您实际上并没有定义i-确保在将其用作索引之前进行定义，例如只需在循环之前编写i=0。

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

2 个答案: