内部 html 脚本 window.addEventListener / window.onload 无法编辑特定的 div答案

【问题标题】：internal html script window.addEventListener / window.onload not working to edit specific div内部 html 脚本 window.addEventListener / window.onload 无法编辑特定的 div
【发布时间】：2020-09-24 17:06:24
【问题描述】：

我想根据用户输入向 div 内容添加一个表格，即使提示启动，表格也不显示。 html如下：

<div id= "content">
    <h3>Customise your table</h3><br/>
</div>
<script>
    function createTable(){
        var tablerow, tablecol, tableheight, tablewidth, tableborder, borderstyle;
        tablerow = prompt("Please enter your desired number of table rows(0-unlimited whole 
                           numbers):");
        tablecol = prompt("Please enter your desired number of table columns(0-unlimited whole 
                           numbers):");
        tableheight = prompt("Please enter your desired table height (non-negative):");
        tablewidth = prompt("Please enter your desired table width (non-negative):");
        tableborder = prompt("Please enter your desired border size(non-negative):");
        borderstyle = prompt("Please enter your desired border style and color (only html border 
                              styles/color accepted):");

        document.getElementsById("content").innerHTML += "<table style='border: " + tableborder + "px " + borderstyle + "'" 
                                                       + "' height= '" + tableheight + "px' width= '" + tablewidth + "px'>";

        for (var row = 0; row < tablerow; row++){
           document.getElementsById("content").innerHTML += "<tr style='border: " + tableborder + "px " + borderstyle + "'>";
            if (row == 0){
                for (var col = 0; col < tablecol; col++){
                    document.getElementsById("content").innerHTML += "<th style='border: " + tableborder + "px " + borderstyle + "'>Column</th>";
                }
                document.getElementsById("content").innerHTML += "</tr>";
            }
            else {
                for (var col = 0; col < tablecol; col++){
                    var tableElement = (tablecol * (row-1)) + 1 + col;
                    document.getElementsById("content").innerHTML += "<td style='border: " + tableborder + "px " + borderstyle + "'>" + tableElement  + "</td>";
                }
                document.getElementsById("content").innerHTML += "</tr>";
            }
        }
        document.getElementsById("content").innerHTML += "</table><br/><button onclick='window.print()'>Print</button>";
   }

    //window.onload = createTable();

    window.addEventListener('load', createTable(), false);
</script>

我试过this和this，但还是不行

如果我对整个页面使用 document.write，页面中的链接将不起作用

【问题讨论】：

标签： javascript html

【解决方案1】：

试试这个

window.onload = () => {
 createTable()
}

【讨论】：

【解决方案2】：

addEventListener 方法中的第二个参数应该是一个函数。在您的代码中，您将函数 createTable 作为第二个参数调用，并且该函数的结果不是函数。您可以通过像这样删除调用括号来解决此问题：

window.addEventListener('load', createTable, false);

这样您将传递实际的createTable 方法。

此外，您的函数名称 document.getElementsById("content") 有错字，它应该是 document.getElementById("content")，因为您只能通过 id 获得一个元素。

【讨论】：