How to manipulate two tables with onclick method in JavaScript

Question

I want to manipulate (add/delete rows) for two tables in html using JavaScript. With one it works, but if I add the second one I get this error:

Uncaught TypeError: Cannot set property 'innerHTML' of null

More precisely: I want to have two tables each with different content based on which button is clicked.

With one table it worked. The first function deleted table content -> added new content. Second function the same, deleted content from first table -> added its new content.

But I want to do this with two tables. Please let me know how it should be done.

function First(tableID, tableID2) {

  let table = document.getElementById(tableID)
  table.innerHTML = ""; // here is the mentioned error.

  // I would like to have something like..
  // let table2 =  document.getElementById(tableID2)
  // table2.innerHTML = ""; 
}

<p>Click the button to add a new row at the first position of the table and then add cells and content</p>

<table id="myTable">
  <TR>
  </TR>
</table>
<table id="myTable2">
  <TR>
  </TR>
</table>
<br>

<button type="button" id="first" onclick="First(myTable, myTable2)">First</button>
<button type="button" id="second" onclick="Second(myTable, myTable2)">Second</button>

Answer 1

If you don't wrap myTable and myTable2 in quotations, JavaScript assumes it is an object. Since you didn't define myTable nor myTable2, they are null. You can't modify the innerHTML of null, and thus you get the error "Cannot set property 'innerHTML' of null".

In the example below, the names are wrapped in quotations which makes it a String:

function First(tableID, tableID2) {

  let table = document.getElementById(tableID)
  table.innerHTML = "<tr>first</tr>"; // here is the mentioned error.
  let table2 = document.getElementById(tableID2)
  table2.innerHTML = "<tr>first again</tr>";
}

function Second(tableID, tableID2) {
  let table = document.getElementById(tableID)
  table.innerHTML = "<tr>second</tr>"; // here is the mentioned error.
  let table2 = document.getElementById(tableID2)
  table2.innerHTML = "<tr>second again</tr>";
}

<p>Click the button to add a new row at the first position of the table and then add cells and content</p>

<table id="myTable">
  <TR>
  </TR>
</table>
<table id="myTable2">
  <TR>
  </TR>
</table>
<br>

<button type="button" id="first" onclick="First('myTable', 'myTable2')">First</button>
<button type="button" id="second" onclick="Second('myTable', 'myTable2')">Second</button>

Alternatively, you could define the two variables before they are referenced:

function First(tableID, tableID2) {

  let table = document.getElementById(tableID)
  table.innerHTML = "<tr>first</tr>"; // here is the mentioned error.
  let table2 = document.getElementById(tableID2)
  table2.innerHTML = "<tr>first again</tr>";
}

function Second(tableID, tableID2) {
  let table = document.getElementById(tableID)
  table.innerHTML = "<tr>second</tr>"; // here is the mentioned error.
  let table2 = document.getElementById(tableID2)
  table2.innerHTML = "<tr>second again</tr>";
}

<p>Click the button to add a new row at the first position of the table and then add cells and content</p>

<table id="myTable">
  <TR>
  </TR>
</table>
<table id="myTable2">
  <TR>
  </TR>
</table>
<br>
<script>
  var myTable = 'myTable';
  var myTable2 = 'myTable2';
</script>
<button type="button" id="first" onclick="First(myTable, myTable2)">First</button>
<button type="button" id="second" onclick="Second(myTable, myTable2)">Second</button>