I have the following function that is tied to the onclick event of a hyperlink. When the page loads, the table with id of table1 is hidden. When the link is clicked, the table should become visible and the text of the link should change. The text of the link is changing as it should but the table is not appearing. Here is the function:
function toggle() {
alert(document.getElementById(“table1”).style.display)
if (document.getElementById(“table1”).style.display.none)
{
document.getElementById(“table1”).style.display.block;
document.getElementById(“myLink”).innerHTML=”Hide All Field Descriptions”;
}
else
{
document.getElementById(“table1”).style.display.none;
document.getElementById(“myLink”).innerHTML=”Show All Field Descriptions”;
}
}
Here is the opening table tag:
<table width=”680″ border=”0″ cellpadding=”4″ id=”table1″ style=”display:none”>
And here is the link:
<a id=”myLink” href=”javascript:” onclick=”toggle()”>Show All Field Descriptions</a>
I added the alert near the beginning of the function to ensure that the script was indeed recognizing that the display value was set to “none” and it is. Guessing I am missing something simply, but can’t seem to see it. If I change my if statement to something like if(1+1==2) the table does appear when I click the link.