时间戳

首页 > 解决方案 > 如何修复未捕获的 TypeError：无法在 wordpress 中的 javascript 中设置 null 的属性“innerHTML”？

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

问题描述

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了，但它不起作用
关于如何在控制台中解决这个问题的任何提示？

标签： javascriptwordpressconsole

解决方案

错误消息告诉您 ELEMENT 为空

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

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

查看正在运行的页面的 HTML

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

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

现在我们有了您的代码段，它似乎工作正常

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

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)
}

推荐阅读