-1

HTML

<div id="main">
  <span>v</span>
  <div id="main_cursor"></div>
</div>

Javascript

function highlight_word() {
  var cursor = document.getElementById(area + '_cursor'),
    pe = cursor.previousElementSibling,
    ne = cursor.nextElementSibling;
  var word = [];

  f();
  word = word.join();
  if (isInArr(keywords_arr, word)) {
    f(true);
  };

  function f(p = false) {
    while ((pe === null ? " " : pe.innerHTML) !== " " ||
      (ne === null ? " " : ne.innerHTML) !== " ") {
      if (pe !== null) {
        while (pe.innerHTML !== " ") {
          p === true ? pe.style.color = "green" : word.push(pe.innerHTML);
          pe = pe.previousElementSibling;
        }; // end of while
        word = word.reverse();
      }; //end of if
      if (ne !== null) {
        while (ne.innerHTML !== " ") {
          p === true ? pe.style.color = "green" : word.push(ne.innerHTML);
          ne = ne.nextElementSibling;
        }; //end of while
      }; //end of if
    }; // end of while
  }; // end of function f
};

客观的

目标是首先获取所有跨度的内部文本，这些跨度介于main_cursor和 跨度之间，其中一个空格作为内部文本，并检查单词获取是否存在于数组中keywords_arr。该单词是否存在于该数组中，然后更改所有这些跨度的文本颜色

或者只是突出显示单词是否在keyword_arr

错误

未捕获的类型错误：无法读取 null 的属性“innerHTML”

错误显示在行中 -

while(pe.innerHTML!==" "){

这只发生在pe!==null不应该发生的得到满足的条件下！

我应该怎么办？

4

1 回答 1

2

在这个循环内部

while (pe.innerHTML !== " ") {
  p === true ? pe.style.color = "green" : word.push(pe.innerHTML);
  pe = pe.previousElementSibling;
}; // end of while

您正在重新分配 的值pe。如果pe不再有任何先前的兄弟姐妹，它将被分配到null.

相反，您可以将您的条件更改为此以确保pe在检查它之前它是有效的innerHTML：

while (pe && pe.innerHTML !== " ") {
于 2016-03-24T17:06:13.163 回答