错误出现为“无法将属性'innerHTML'设置为null”
[英]Error coming as “Cannot set property 'innerHTML' of null”
问题描述
I am generating html table from Javascript and assign as InnerHTML to a div tag, but its giving an error: 
我正在从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
3 个解决方案
解决方案1
2 2019-01-29 06:46:52
Try changing to something like this, so we ensure the HTML DOM has completed loading first. 尝试更改为类似的内容，因此我们确保HTML DOM首先完成加载。
Use ES6 template string instead of plain strings! 使用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>
解决方案2
0 2019-01-29 06:43:09
Removes new lines and extra spaces in the HTML String. 删除HTML字符串中的新行和多余的空格。
Rest of your code works fine! 您的其余代码工作正常！ However it is not a god practice. 但是，这不是神的做法。 Ideally you have to wait for the window to be loaded. 理想情况下，您必须等待窗口加载。
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>
解决方案3
0 2019-01-29 06:45:52
Your issue is that you are trying to access your div with the id of "rosterlegend" before the DOM has loaded. 您的问题是，您在加载DOM之前尝试使用id为“ rosterlegend”访问div。 This means that when your javascript tries to access your element it cannot. 这意味着当您的JavaScript尝试访问您的元素时，它就无法访问。 One way you can fix this is by adding the load or DOMContentLoaded event listener to your element, where the function will fire once your HTML (including images if you use the load event) and window has loaded. 解决此问题的一种方法是将load或DOMContentLoaded事件侦听器添加到元素中，在HTML（如果使用load事件，包括图像）和窗口加载后，该函数将触发。 This way your javascript will know about your HTML. 这样，您的JavaScript就会知道您的HTML。
See working example below: 请参见下面的工作示例：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.