show 1 div hide another

[JimJx]

Hi all,
what I am trying to do is when a user clicks on a button, show that div. I can get that to work. But, I also want to hide that button after it is clicked. That doesn't work and breaks the rest of the script so it doesn't work at all.....

The html for both examples is

<input style="display:all" id="update" type="button" value="Change Password" onclick="javascript:toggleLayer('frm1');" />

This works:

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}

This does not.....

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
var style3 = document.getElementById(update).style;
style2.display = style2.display? "":"block";
style3.display = style3.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
var style3 = document.all[update].style;
style2.display = style2.display? "":"block";
style3.display = style3.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
var style3 = document.layers[update].style;
style2.display = style2.display? "":"block";
style3.display = style3.display? "":"block";
}
}

When I add the lines for style3, when I load the page, I get

Error in parsing value for property 'display.' Declaration dropped.

And when I click the button, I get the error

update is not defined

Any ideas about where I am going wrong?

Thanks!
Jim

 

[cLFlaVA]

1) get rid of the ghetto browser sniffing. it's so 90s. simply use document.getElementById - it works in most/all modern common browsers.

2) the update needs to be in quotes in [tt]var style3 = document.getElementById(update).style;[/tt]

3) i don't believe "all" is a valid display style setting.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[dkdude]

<input style="display:[COLOR=red]block[/color]" id="update" type="button" value="Change Password" onclick="toggleLayer('frm1');" />

Then

function toggleLayer(id) {
document.getElelemtById(id).style.display = 'block';
document.getElelemtById('update').style.display = 'none';

... should do the trick!?

 

[cLFlaVA]

thanks for reiterating what i've already stated.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[JimJx]

Thanks for the replies!

I went with the suggestion that I drop the sniffing and made a couple minor changes and everything works great now.

Jim