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>

Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Jun 12 '21 at 21:36

score 0 · Answer 1 · answered Jun 12 '21 at 20:23

0

just add some quotation mark on your args when calling your function. Otherwise, javascript think "myTable" is a variable, which doesn't exists.

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

answered Jun 12 '21 at 20:23

Benliam12

81
5

Spectric · Accepted Answer · 2021-06-12T20:28:41.063

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>

score 0 · Answer 3 · answered Jun 12 '21 at 20:30

Were you trying to use just one function to edit both tables? Here's a version of that. Just pass in the ID of the table with a string.

function eTable(tableID) {
  let table = document.getElementById(tableID)
  let row = table.insertRow(0);
  let cell = row.insertCell(0);
  cell.innerHTML = "New cell for " + tableID;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content</p>
Table 1:
<table id="myTable">
  <TR>
  </TR>
</table>
Table 2:
<table id="myTable2">
  <TR>
  </TR>
</table>
<br>
<button type="button" id="first" onclick="eTable('myTable')">First</button>

<button type="button" id="second" onclick="eTable('myTable2')">Second</button>

How to manipulate two tables with onclick method in JavaScript

3 Answers3