Question

错误提示“无法将属性‘innerHTML’设置为 null”

2019-01-29

2738

javascript html-table

我正在从 Javascript 生成 html 表并将其作为 InnerHTML 分配给 div 标签，但是出现了错误：

"Uncaught TypeError: Cannot set property 'innerHTML' of null"

<html>
<body>
<div class="fieldlist-vertical-title" style="color:white;left:0px;display:none;" id="rosterlegend">Some text</div>
<script>
   function generateLegend()
       {
       var fullTable ='' fullTable='<Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD>
       <TD>01:00 to 21:30</TD></TR></Table></TR></Table>'
       document.getElementById('rosterlegend').innerHTML = fullTable
       }
   generateLegend();
</script>
</body>
</html>

Error : Uncaught TypeError: Cannot set property 'innerHTML' of null

Answer 1

尝试更改为类似这样的内容，这样我们就可以确保 HTML DOM 已先完成加载。
使用 ES6 模板字符串代替纯字符串！

document.addEventListener('DOMContentLoaded', () => {
  generateLegend();
});

function generateLegend() {
  fullTable = `<Table>
                 <TR>
                   <Table>
                     <TR bgcolor=#FF5733>
                       <TD>MM</TD>
                       <TD>01:00 to 21:30</TD>
                     </TR>
                     <TR bgcolor=#FFFFFF>
                       <TD>EVVV</TD>
                       <TD>09:00 to 05:30</TD>
                     </TR>
                  </Table>
                 </TR>
               </Table>`;

  document.getElementById('rosterlegend').innerHTML = fullTable;
}

<div id="rosterlegend">
  <div>

Answer 2

删除 HTML 字符串中的新行和多余空格。

其余代码运行正常！然而，这不是一个好习惯。理想情况下，您必须等待窗口加载。

window.onload(){
  generateLegend();
}

function generateLegend() {
   var fullTable = " <Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD><TD>01:00 to 21:30</TD></TR><TR bgcolor=#FFFFFF><TD>EVVV</TD><TD>09:00 to 05:30</TD></TR></Table></TR></Table>";

   document.getElementById('rosterlegend').innerHTML = fullTable;
}
generateLegend();

<div id="rosterlegend">Some text</div>

Answer 3

您的问题是，在 DOM 加载之前，您尝试使用 id 为“rosterlegend”的 div 来访问它。这意味着当您的 javascript 尝试访问您的元素时，它无法访问。解决此问题的一种方法是将 load 或 DOMContentLoaded 事件侦听器添加到您的元素，一旦您的 HTML（如果您使用 load 事件，则包括图像）和窗口加载，该函数就会触发。这样您的 javascript 就会知道您的 HTML。

请参阅下面的工作示例：

function generateLegend() {
   var fullTable = " <Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD><TD>01:00 to 21:30</TD></TR><TR bgcolor=#FFFFFF><TD>EVVV</TD><TD>09:00 to 05:30</TD></TR></Table></TR></Table>";

   document.getElementById('rosterlegend').innerHTML = fullTable;
}

window.addEventListener("load", generateLegend); // call your function when the window has loaded

<div id="rosterlegend"></div>