JavaScript: TypeError: null is not an object

The specific error I get is:

TypeError: null is not an object (evaluating ‘document.getElementById(‘table’).innerHTML’)

I am trying to use my Delete button but every time I click on it, I get the above error in Safari. In Google Chrome, I get the following error:

Uncaught TypeError: Cannot read property ‘innerHTML’ of null

The error comes from my index.js source code. Here is the index.js code.

db.transaction(function (tx) {
tx.executeSql(‘INSERT INTO RELATE (firstname, lastname, fathername, mothername) VALUES ("’ + firstName + ‘“,”’ + lastName + ‘“,”’ + fatherName + ‘“,”’ + motherName + ‘")’);

        tx.executeSql('SELECT * FROM RELATE WHERE firstname = "' + firstName + '" AND lastname = "' + lastName + '" AND fathername = "' + fatherName + '" AND mothername = "' + motherName + '"', [], function (tx, results) {
           var len = results.rows.length, i;
           for (i = 0; i < len; i++){
              msg = "<tr>";
              msg +="<td><h3>" + results.rows.item(i).firstname + " " + results.rows.item(i).lastname + "</h3></td>";
              msg += "</tr>";
              msg += "<tr>";
              msg += "<td>" + results.rows.item(i).fathername + " " + "</td>";
              msg += "<td>" + results.rows.item(i).mothername + "</td>";
              msg += "</tr>";
              document.getElementById('table').innerHTML +=  msg;                  
           }
        }, null);
     });

The error is referred to my addMember function whenever I click on the Delete button.

1 Like

there is no element with the ID of “table” in your document.

There is, in my read.html. But I do not know why it is not being read.

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <LINK rel="stylesheet" type="text/css" href="css/styles.css">
    <TITLE>Code</TITLE>
   </head>
    
   <body>
      <div id="container">
	  <form name="relateForm" id="myTreeForm" action="index.html">
      <div id="table">
		<table>
		</table>   
      </div>
	<button type = "submit" value="Delete" name="myDelete" id="myDelete">Delete</button>
	</form>
    </div>
	<script type="text/javascript" src="js/index.js"></script>
   </body>
    
</html>

That’s not an ID, it’s a tag.

<div id="table"></div>

is an id, right?

id=“table” would be an id.

So
<div id="table"></id>

is not an id?

Sorry, I didn’t see that bit. Dimwit moment! :frowning:

possible reasons:

  • the element or id was removed
  • the id was renamed
  • the referring function was called before the element was parsed into the DOM

How would the id be removed?

<table></table> with or without an id is invalid. At a minimum it needs <tr><td></td></tr> in it to be a valid table tag.

You shouldn’t be trying to insert parts of tables using JavaScript - particularly using innerHTML which doesn’t work for parts of tables in all browsers.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.