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

You are triggering the function already with `createTable()` while adding a listener. Change your last line to `window.addEventListener('load', createTable, false);` and try again. — kabirbaidhya, Sep 24 '20 at 05:16

score -1 · Answer 1 · answered Sep 24 '20 at 05:19

-1

I've always had issues with window.addEventListener for load. I use document.addEventListener with DOMContentLoaded instead.

document.addEventListener("DOMContentLoaded", createTable());

answered Sep 24 '20 at 05:19

tdinpsp

160
6

You are invoking the function before it gets registered it to the event handler. Watch out your parenthesis, you should put `createTable` instead of `createTable()` here. – kabirbaidhya Sep 24 '20 at 05:22
This has the same problem as the original code. – Barmar Sep 24 '20 at 05:26
yes this does not work either, with or without the () – Wei Xiong Sep 24 '20 at 05:47

window.addEventListener / window.onload not working to edit specific div

1 Answers1