internal html script window.addEventListener / window.onload not working to edit specific div

Question

I want to add a table to the div contents according to user input, somehow the table does not show even though the prompts starts. html as below:

<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>

i have tried this and this, but still not working

if i use document.write for the whole page instead, the links in the page does not work

score 0 · Answer 1 · answered Sep 24 '20 at 08:42

0

Try this

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

answered Sep 24 '20 at 08:42

Oliver Ilmjärv

321
2
11

Saar Davidson · Answer 2 · 2020-09-24T09:06:24.393

The second argument in addEventListener method should be a function. In your code, you called the function createTable as the second argument and the result of that function is not a function. You can fix that by removing the call parenthesis like so:

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

This way you will pass the actual createTable method.

In addition you have a typo in the function name of document.getElementsById("content") it should be document.getElementById("content") since you get only one element by id.

internal html script window.addEventListener / window.onload not working to edit specific div

2 Answers2