Question

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

“未捕获的TypeError：无法将属性'innerHTML'设置为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>

错误：未捕获的TypeError：无法将属性'innerHTML'设置为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>

错误出现为“无法将属性'innerHTML'设置为null”

3 个答案: