/    Sign up×
Community /Pin to ProfileBookmark

Trouble displaying/hiding table

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.

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@betheballauthorNov 23.2005 — Nevermind. This seems to work, although I don't understand the difference:

function toggle() {

if (document.getElementById("table1").style.display[B]=="none"[/B])

{

document.getElementById("table1").style.display[B]="block"[/B];

document.getElementById("myLink").innerHTML="Hide All Field Descriptions";

}

else

{

document.getElementById("table1").style.display[B]="none"[/B];

document.getElementById("myLink").innerHTML="Show All Field Descriptions";

}

}

I thought document.getElementById("table1").style.display.none and document.getElementById("table1").style.display="none" were the same. Aren't they?
Copy linkTweet thisAlerts:
@chazzyNov 23.2005 — I thought document.getElementById("table1").style.display.none and document.getElementById("table1").style.display="none" were the same. Aren't they?[/QUOTE]

No, they're not. It's the same reason why document.getElementById("table1").style.color="black" is correct and document.getElementById("table1").style.color.black is incorrect. see also border definitions: it would be very poor syntax (and not run correctly) if you could define a border as:

document.getElementById("table1").style.border.1px solid black
Copy linkTweet thisAlerts:
@KorNov 23.2005 — I thought document.getElementById("table1").style.display.none and document.getElementById("table1").style.display="none" were the same. Aren't they?[/quote]

Are they?

Objects have properties [I]attached[/I]. Properties have values [I]assigned[/I]

object.property=value//this is an assignement

[B]'none'[/B] is a value, not a property.
Copy linkTweet thisAlerts:
@betheballauthorNov 23.2005 — Thanks for the clarification.
×

Success!

Help @betheball spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...