Show/Hide table

flyingchoc · Sep 22, 2006

Hello,

I am trying to hide an HTML table when the page initially loads and then display it when a button is clicked.
I have created two functions to do this

Code:

function showTable(){

   document.getElementById('myTable').style.visibility = "visible";

}

function hideTable(){
     document.getElementById('myTable').style.visibility = "hidden";

}

Now if I run the hideTable function in the HTML head tag like this:

Code:

<html>
<head>
<script language="JavaScript">
hideTable();
</script>
...

I get an "getElementById has no properties" error.
If I place it after the line of HTML that creates the table the error goes away but the table always remains hidden.

Any ideas anyone?

Thanks

tsuji · Sep 22, 2006

[tt]<script language="JavaScript">
[red]//[/red]~~hideTable();~~
window.onload=hideTable;
/*
//or
window.onload=function() {
hideTable();
//other stuff
}
*/
</script>[/tt]
Until the page is loaded pass the table element, it is undefined. So execute function on it until the page is loaded.

flyingchoc · Sep 23, 2006

Hey thanks for your help, that managed to cure the problem. But now when I press button and run a piece of code called "showTable" (to display the table) it remains hidden...I have placed some alerts in the code to see where it is going wrong and it seems that after the button is pressed,the table is displayed(ie showTable is executed) and then hidden again. Below is the code..

Code:

window.onload = function(){
   var s = document.getElementById("myTable");
   s.style.visibility = "hidden";

}

function showTable(){
  alert("hello");
  document.getElementById("myTable").style.visibility= "visible"

}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Show/Hide table

flyingchoc

Programmer

tsuji

Technical User

flyingchoc

Programmer

Similar threads

Part and Inventory Search

Sponsor