there's an error = innerHTML null of a javascript when window loads

Question

Why do I get an error or

Uncaught TypeError: Cannot set property 'innerHTML' of null

every time the window loads?

I tried to display data from web sql

Btw, I put javascript in different file (main.js)

Javascript function :

if (window.openDatabase) 
{
    var mydb = openDatabase("data", "0.1", "personal data", 1024 * 1024);

    mydb.transaction(function (t) 
    {
        t.executeSql("CREATE TABLE IF NOT EXISTS person (id INTEGER PRIMARY KEY ASC, gender TEXT, weight INTEGER");
    });
} 
else 
{
    alert("Browser doesnt support web sql!");
}

function show_data() {
    if (mydb) {
        mydb.transaction(function (t) {
            t.executeSql("SELECT * FROM person", [], update_list);
        });
    } else {
        alert("database not found, browser doesnt support web sql!");
    }
}

show_data();

function update_list(transaction, results) 
{

    var listholder = document.getElementById("list_data");

    listholder.innerHTML="";

    var i;
    for (i = 0; i < results.rows.length; i++) 
    {

        var row = results.rows.item(i);

        listholder.innerHTML += 
        `<tr>
        <td>${row.gender}</td>
        <td>${row.weight}</td>  
        </tr>`;
    }
}

<body>
<table border="0" cellpadding="5" cellspacing="5">
  <thead>
    <td><div class="list-item__left">Gender</div></td>
    <td><div class="list-item__left">Weight</div></td>
  </thead>
  <tbody  id="list_data">
  </tbody>
</table>
<script src="js/main.js"></script>
</body>

thank you

It is likely that the dom hasn't loaded yet when your script is being executed. Move your script tag at the end of the body or add a `load` event listener before executing your code. — Bali Balo, Jun 21 '19 at 19:18
Welcome to SO! Please make sure your question is [reproducible](https://stackoverflow.com/help/minimal-reproducible-example) — GalAbra, Jun 21 '19 at 19:36
@Barmar thanks for letting me know. In this case, it is likely that the element has been removed by some other code before this function is getting called. Hard to tell without seeing the full code. — Bali Balo, Jun 21 '19 at 19:38
Another note: innerHTML is very slow. You should avoid using it in a loop like that. The best would be to use `createElement` etc. but if you really want to use it you should at least store the content in a separate variable and only set innerHTML once at the very end with that variable. — Bali Balo, Jun 21 '19 at 19:40
well mydb could not be defined if it does not go into that if.... — epascarello, Jun 21 '19 at 19:53
@LawrenceCherone I forgot to show that var "mydb" here, i've edited it. — Noura, Jun 21 '19 at 19:57
@Noura works fine for me with no error in Chrome: https://jsfiddle.net/nt9v74sy/1/ - although you do have an error in your `CREATE TABLE` statement (missing the closing `)` at the end). Adding an error callback (second function) to `.transaction` helps to see that. No DOM error though, is that your full code? — Bali Balo, Jun 21 '19 at 20:35
@BaliBalo OMG thank you for letting me know. Yes, it's my full js code (excluding the function for insert data) — Noura, Jun 22 '19 at 04:02

there's an error = innerHTML null of a javascript when window loads

0 Answers0