javascript mind twister

Question

cwarn23 387 Occupation: Genius

15 Years Ago

I have being trying to make a javascript code that will show different submenus depending on what was selected on the previous menu. Although my script has no bugs according to Internet Explorer it seems to not work in IE nor Crome. Can anybody see what's wrong with this code because it looks perfect but just doesn't work as in won't display the submenus on selection.

<head><script language=javascript type='text/javascript'>
function showprojecttype(var1) { 
if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('divmodify').style.visibility = 'hidden';
    document.getElementById('divcreate').style.visibility = 'hidden'; 
    } else { 
    if (document.layers) { // Netscape 4 
        document.divmodify.visibility = 'hidden';
        document.divcreate.visibility = 'hidden';
        } else { // IE 4 
        document.all.divmodify.style.visibility = 'hidden';
        document.all.divcreate.style.visibility = 'hidden';
        } 
    }

if (var1=='divcreate') {
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('divcreate').style.visibility = 'visible'; 
        } else { 
        if (document.layers) { // Netscape 4 
            document.divcreate.visibility = 'visible'; 
            } else { // IE 4 
            document.all.divcreate.style.visibility = 'visible'; 
            } 
        } 
    } else {
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('divmodify').style.visibility = 'visible'; 
        } else { 
        if (document.layers) { // Netscape 4 
            document.divmodify.visibility = 'visible'; 
            } else { // IE 4 
            document.all.divmodify.style.visibility = 'visible'; 
            } 
        } 
    }
}
</script></head><body onload=javascript:showprojecttype('divcreate');>
<form method='post' style='margin:0px; padding:0px;' name='form1'>

Modify or Create:<select name='modify||create' size=1 onchange='javascript:showprojecttype(this.options[this.selectedIndex].value);'>
<option value='divcreate'>
<option value='divcreate'>Create
<option value='divmodify'>Modify
</select><br>
<select id='divmodify' name='divmodify' size=1 style='display:none;'>
<option value='1'>option a
<option value='1'>option b
<option value='1'>option c
<option value='1'>option d
</select>
<div id='divcreate' name='divcreate' style='display:none;'>
If this text shows it probably works.
</div>
</form></body>

javascript

1 Contributor
1 Reply
97 Views
6 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by cwarn23

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

cwarn23 387 Occupation: Genius Team Colleague Featured Poster · Answer 1 · 2009-04-08T18:09:07+00:00

Silly me. I didn't follow the tutorial properly. I just found out that javascript was meant to hide the menus and not css. There for my fixed code is as follows and this topic is solved.

<body>
<form method='post' style='margin:0px; padding:0px;' name='form1'>

Modify or Create:<select name='modify||create' size=1 onchange='javascript:showprojecttype(this.options[this.selectedIndex].value);'>
<option value=''>Select
<option value='divcreate'>Create
<option value='divmodify'>Modify
</select><br>
<select id='divmodify' name='divmodify' size=1>
<option value='1'>option a
<option value='1'>option b
<option value='1'>option c
<option value='1'>option d
</select>
<div id='divcreate' name='divcreate'>
If this text shows it probably works.
</div>
</form>
<script language=javascript type='text/javascript'>
if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('divmodify').style.visibility = 'hidden';
    document.getElementById('divcreate').style.visibility = 'hidden'; 
    } else { 
    if (document.layers) { // Netscape 4 
        document.divmodify.visibility = 'hidden';
        document.divcreate.visibility = 'hidden';
        } else { // IE 4 
        document.all.divmodify.style.visibility = 'hidden';
        document.all.divcreate.style.visibility = 'hidden';
        } 
    }
function showprojecttype(var1) { 
if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('divmodify').style.visibility = 'hidden';
    document.getElementById('divcreate').style.visibility = 'hidden'; 
    } else { 
    if (document.layers) { // Netscape 4 
        document.divmodify.visibility = 'hidden';
        document.divcreate.visibility = 'hidden';
        } else { // IE 4 
        document.all.divmodify.style.visibility = 'hidden';
        document.all.divcreate.style.visibility = 'hidden';
        } 
    }

if (var1=='divcreate') {
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('divcreate').style.visibility = 'visible'; 
        } else if (var1=='divmodify') { 
        if (document.layers) { // Netscape 4 
            document.divcreate.visibility = 'visible'; 
            } else { // IE 4 
            document.all.divcreate.style.visibility = 'visible'; 
            } 
        } 
    } else {
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('divmodify').style.visibility = 'visible'; 
        } else { 
        if (document.layers) { // Netscape 4 
            document.divmodify.visibility = 'visible'; 
            } else { // IE 4 
            document.all.divmodify.style.visibility = 'visible'; 
            } 
        } 
    }
}
</script></body>

*Solved*