意外落入if语句

Question

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和带有空格的跨度之间作为内部文本，并检查单词获取是否存在于数组{{1 }}。该单词是否存在于该数组中，然后更改所有跨度的文本颜色

或只是突出显示该单词是否在keywords_arr

中

错误

  

未捕获的TypeError：无法读取null

的属性'innerHTML'

错误显示在行 -

中

keyword_arr

只有当while(pe.innerHTML!==" "){ 的条件得到满足时才会发生这种情况！

我该怎么办？

Answer 1

此循环内部

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 !== " ") {