Javascript：未捕获的类型错误：无法将属性“innerHTML”设置为 null [重复]答案

【问题标题】：Javscript: Uncaught TypeError: Cannot set property 'innerHTML' of null [duplicate]Javascript：未捕获的类型错误：无法将属性“innerHTML”设置为 null [重复]
【发布时间】：2020-09-28 05:32:59
【问题描述】：

我尝试查看其他有类似问题的线程，但似乎仍然无法解决此问题。

目前，我有一个搜索栏，可在用户点击按钮后显示相关结果。这行得通。

然后，用户可以单击任何一个结果并将它们带到一个新的 HTML 页面。这也有效。

我正在尝试在 HTML 页面上显示来自 JS 文件的变量，并且我尝试使用 .innerHTML，但我不断收到错误消息：

onePage.js:61 Uncaught TypeError: Cannot set property 'innerHTML' of null

这是我的 HTML 文件中的内容：

   <div id="output"></div>

这就是我的 JS 文件中的内容：

function setList(group) {

  clearList();
   for (const state of group) {

      const item = document.createElement('li');
      item.classList.add('list-group-item');
      const text = document.createTextNode(state.name); 

   
      var newListItem = document.createElement("li");
      var newAnchor = document.createElement("a");
      newAnchor.textContent = state.name;
      document.getElementById("output").innerHTML = text; // line where I get error

     
      newAnchor.setAttribute('href', "displayInfo.html"); 
      newListItem.appendChild(newAnchor);

      list.appendChild(newListItem);
      console.log(newListItem);

   }

有人可以帮帮我吗？提前致谢！

【问题讨论】：

在 DOM 加载之前是 setList？
你何时执行给定的 setList 函数？它应该是 onload。

标签： javascript html innerhtml

【解决方案1】：

如果 HTML 中的文件引用是正确的，那么您的代码似乎在 DOM 完全加载之前正在运行。你可以尝试调用DOMContentLoaded里面的函数：

window.addEventListener('DOMContentLoaded', (event) => {
  // call your function here
});

【讨论】：

我尝试按照您的建议添加 DOMContentLoaded，但未显示文本。我将它添加到 setList 函数中。当我实际调用 setList 函数时，我也尝试添加它，但在这种情况下，什么也没有发生（搜索栏也停止工作）。如果需要，我可以更新原始帖子以进行澄清。 window.addEventListener('DOMContentLoaded', (event) => { document.getElementById("output").innerHTML = text; });
@user14262940，有什么错误吗？
在 setList 函数中添加 addEventListener 时没有错误，但 HTML 文件中没有显示文本
@user14262940，你应该在DOMContentLoaded中调用函数setList，而不是一行代码。
我尝试在 DomContentLoaded 中调用 setList，但我的搜索栏完全停止工作......为混乱道歉，我是 JS 新手