意外落入 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
};

Objective

中的objective是首先获取main_cursor和space之间的所有span的内部文本，并检查是否单词 obtain 出现在数组 keywords_arr 中。该数组中是否存在该单词，然后更改所有这些跨度的文本颜色

或者如果单词在 keyword_arr

中，则只突出显示

错误

Uncaught TypeError: Cannot read property 'innerHTML' of null

错误显示在行-

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

只有当 pe!==null 的条件得到满足时才会发生这种情况，这是不应该发生的！

我该怎么办？

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

意外落入 if 语句

unexpected fall to if statement

html

javascript

if-statement

fall-through

HTML

Javascript

Objective

错误