錯誤出現為“無法將屬性'innerHTML'設置為null”

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 個解決方案

解決方案1
2 2019-01-29 06:46:52

解決方案2
0 2019-01-29 06:43:09

解決方案3
0 2019-01-29 06:45:52

錯誤出現為“無法將屬性&#39;innerHTML&#39;設置為null”

問題描述

3 個解決方案

解決方案1 2 2019-01-29 06:46:52

解決方案2 0 2019-01-29 06:43:09

解決方案3 0 2019-01-29 06:45:52

錯誤出現為“無法將屬性'innerHTML'設置為null”

解決方案1
2 2019-01-29 06:46:52

解決方案2
0 2019-01-29 06:43:09

解決方案3
0 2019-01-29 06:45:52