如何修复未捕获的 TypeError：无法在 wordpress 中的 javascript 中设置 null 的属性“innerHTML”？

Question

const printSentence = (id, sentence, speed = 50) => {
  let index = 0;
  let element = document.getElementById(id);
  
  let timer = setInterval(function() {
    const char = sentence[index];
    
    if (char === '<') {
      index = sentence.indexOf('>', index);  // skip to greater-than
    }
    
    element.innerHTML = sentence.slice(0, index);
    
    if (++index === sentence.length) {
      clearInterval(timer);
    }
  }, speed);
} // printSentence

printSentence(
  'one',
  '<h2>Wordpress</h2>',
  50
);

<div id="one"></div>

但我在控制台中看到一个错误：

未捕获的类型错误：无法将属性“innerHTML”设置为 null

我尝试了window.onload，但它不起作用
有关如何在控制台中解决此问题的任何提示？

Answer 1

错误信息告诉你 ELEMENT 为空

这意味着 let element = document.getElementById(id); 返回 null。 （添加一个 console.log 元素，如果你愿意，可以检查）。

最可能的原因是没有 ID 为“one”的标签。

查看正在运行的页面的 HTML

确保它有一个 id 为“one”的标签。 出现这种情况的最常见原因是 DOM 在 javascript 运行时不包含 id 为“one”的元素。

这就是为什么最好使用 图标来输入您的代码，以便其他人可以轻松地复制它。

现在我们有了你的 sn-p，它似乎工作正常

它在输出窗口中显示缓慢出现的文本。在控制台日志中，我看到一条不相关的错误消息，可能与安全有关。

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at Object.vAPI.bootstrap (chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:1755:46)
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:1764:6

如果它也适用于您，但您担心您的您描述的错误消息，您为什么不这样做：

改变

element.innerHTML = sentence.slice(0, index);

到

if(element){
  element.innerHTML = sentence.slice(0, index);
} else {
  console.log("Cannot do element.innerHTML. The current value of element is ",element,". Index is currently ",index)
}