Buttons that just won't die!

JavaScript
1

Hello!

I’m writing some code to make some sections visible/invisible on my page using the code below (it does the job!). My problem is that while it does what I hope it to do, once I click on one of the buttons, it remains “checked” (though the visibility will continue to toggle). Any thoughts as to how to fix this would be appreciated.

Thanks so much…

<input type=button name=type value='Add Link' onclick="setVisibility('link_area', 'inline');setVisibility('file_area', 'none');setVisibility('text_area','none');";>
<input type=button name=type value='Add file' onclick="setVisibility('link_area', 'none');setVisibility('file_area', 'inline');setVisibility('text_area','none');";>
<input type=button name=type value='Add Text' onclick="setVisibility('link_area', 'none');setVisibility('file_area', 'none');setVisibility('text_area','inline');";></p>

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
// Start with a clean slate!
setVisibility("link_area", "none");
setVisibility("file_area", "none");
setVisibility("text_area", "none");
</script>
2

This part of your script is changing the visibility of the divs on the page. You seem to be mixing up visibility and display. Display can be “in-line”, but visibility can only be “visible” or “hidden”. I have re-written your script below to illustrate the point.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Visibility Changes</title>
<script type=“text/javascript”>
<!–
function setVisibility(id, visibility) {
document.getElementById(id).style.visibility = visibility;
}
// Start with a clean slate!
window.onload=function()
{ setVisibility(“link_area”, “hidden”);
setVisibility(“file_area”, “hidden”);
setVisibility(“text_area”, “hidden”);
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:18px; color:#000; text-align:center; margin:3px 0px; }
#wrap { position:relative; top:0px; left:0px; width:800px; height:500px; margin:0px auto; border:1px solid #000; text-align:left; }
.gen { margin-top:20px; width:200px; height: 100px; border:1px solid #00F; }
–>
</style>
</head>

<body>

<div id=“wrap”>
<form name=“myForm”>
<p>
<input type=“button” name=“type” value=“Add Link” onclick=“setVisibility(‘link_area’, ‘visible’);setVisibility(‘file_area’, ‘hidden’);setVisibility(‘text_area’,‘hidden’);” ;>
<input type=“button” name=“type” value=“Add file” onclick=“setVisibility(‘link_area’, ‘hidden’);setVisibility(‘file_area’, ‘visible’);setVisibility(‘text_area’,‘hidden’);” ;>
<input type=“button” name=“type” value=“Add Text” onclick=“setVisibility(‘link_area’, ‘hidden’);setVisibility(‘file_area’, ‘hidden’);setVisibility(‘text_area’,‘visible’);” ;></p>
</form>
<!-- end form –>
<div id=“link_area” class=“gen”>
Add Link</div>
<div id=“file_area” class=“gen”>
Add File</div>
<div id=“text_area” class=“gen”>
AddText</div>
</div>
<!-- end wrap –>

</body>

</html>

3

The problem is caused by the radio buttons you are using on your page all having diffferent names. Radio buttons are used as a group and should all be named the same. If you use a single name then only one will remain selected as you click across the group.

4

Thanks again. I’m sure that others will find your solution helpful.