I'm trying to get two buttons to switch between 2 tables with javascript, but whenever i test, both of the tables appear instead of just one

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function() {
  table1.style.display = "table";
  table2.style.display = "none";
}

btnTab2.onclick = function() {
  table1.style.display = "none";
  table2.style.display = "table";
}

<table id=table1>
<table id=table2>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">

I'm trying to get two buttons to switch between 2 tables with javascript, but whenever i test, both of the tables appear instead of just one

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function() {
  table1.style.display = "table";
  table2.style.display = "none";
}

btnTab2.onclick = function() {
  table1.style.display = "none";
  table2.style.display = "table";
}

<table id=table1>
<table id=table2>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">

I expect 1 table to be showing at a time and the button to switch between them, but instead they both show at the same time and the buttons dont do anything

• javascript
• css

• 4 jsfiddle/eu321r4d your code works as expected, not sure why you'd have issues. – Clarity Commented Sep 17, 2019 at 8:45
• Whatever you have done is perfect, just need to hide any one of those two table so that you can check you functionality. – ankitkanojia Commented Sep 19, 2019 at 18:08
• please refer my below post for the same. – ankitkanojia Commented Sep 19, 2019 at 18:09

5 Answers 5

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function() {
  table1.style.display = "table";
  table2.style.display = "none";
}

btnTab2.onclick = function() {
  table1.style.display = "none";
  table2.style.display = "table";
}

#table2 {
  display: none;
}

<table id="table1">
  <tr>
    <td>Table1</td>
  </tr>
</table>
<table id="table2">
  <tr>
    <td>Table2</td>
  </tr>
</table>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">

Your code is right but you just forgot to initialize the display on your tables and to close the table tags : (I added some content so we see which table is visible)

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function() {
  table1.style.display = "table";
  table2.style.display = "none";
}

btnTab2.onclick = function() {
  table1.style.display = "none";
  table2.style.display = "table";
}

<table id=table1 style="display: table">
  <thead>
    <tr>
      <th colspan="2">The table header 1</th>
    </tr>
  </thead>
</table>
<table id=table2 style="display: none">
  <thead>
    <tr>
      <th colspan="2">The table header 2</th>
    </tr>
  </thead>
</table>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">

I'm replacing your tables with divs, because it's easier to show the thought behind the code with less clutter.

You can add listeners directly onto the buttons, and by doing that, it's easier to send in parameters. I made something a little bit more dynamic, where it's possible to add any number of tables with ease without having to change the code. All you need to do is change the parameter in showTable('table2') to showTable('table3') in the button.

This solutions wont demand as many variables, and it's not dependent on whether the page has loaded or not. Like @brianfit said, you're probably having your javascript code in the head element which means that the document doesn't exist when the code runs, and you can't therefor find any elements on the page.

I also think it's better to use classes to style elements, rather changing the style in code. The semantics looks better, and you get IMHO a better understanding of why some tables are hidden.

function showTable(tableIdToShow) {
  hideAllTables();
  
  let tableElement = document.getElementById(tableIdToShow);

  tableElement.classList.add('show');
}

function hideAllTables() {
  let allTableElements = document.querySelectorAll('.table');

  for (tableElement of allTableElements) {
    tableElement.classList.remove('show')
  }
}

.table {
  display: none;
}

.table.show {
  display: block;
}

<div id="table1" class="show table">TABLE 1</div>
<div id="table2" class="table">TABLE 2</div>

<input type="button" onclick="showTable('table1')" value="Table 1">
<input type="button" onclick="showTable('table2')" value="Table 2">

If your code block is in the header, try moving it down to just before the closing body tag. I just ran it both ways, and it doesn't work in the header, does work in body.

The reason: the script is loaded in the header before the html, so the getelementbyid call returns null. By placing the script after the html, the div populates the id and the script loads it properly.

If you load your file in Chrome and turn on the Javascript console, you would have seen an error message similar to the following:

(index):12 Uncaught TypeError: Cannot set property 'onclick' of null
at (index):12

Your script is correct and is working. The problem was with the <table>. it was empty and not closed. So you were not able to notice the change in table display. try the below sample.

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

var btnTab1 = document.getElementById("showTable1");
var btnTab2 = document.getElementById("showTable2");

btnTab1.onclick = function () {
  table1.style.display = "block";
  table2.style.display = "none";
}
btnTab2.onclick = function () {
  table1.style.display = "none";
  table2.style.display = "block";
}

<table id=table1>
  <tr>
    <td>table 01</td>
  </tr>
</table>
<table id=table2>
  <tr>
    <td>table 02</td>
  </tr>
</table>

<input type="button" id="showTable1" value="Table 1">
<input type="button" id="showTable2" value="Table 2">