JavaScript programmers also find a lot of use for the visibility property, which enables you to toggle the visibility of elements. Here's how we used that property in Chapter 12, "Working with Forms, Buttons, Check Boxes, and Radio Buttons," (Listing 12-13.html) to show and hide some extra controls (if using Netscape Navigator, you'll need version 6.0 or later): <HTML> <HEAD> <TITLE>Showing and hiding controls</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function checkClicked(check) { if(check.checked) { document.form1.button1.style.visibility= "visible" document.form1.button2.style.visibility= "visible" } else { document.form1.button1.style.visibility= "hidden" document.form1.button2.style.visibility= "hidden" } } function hideButtons() { document.form1.button1.style.visible = false document.form1.button2.style.visible = false } // --> </SCRIPT> </HEAD> <BODY> <H1>Showing and hiding controls</H1> <FORM NAME="form1"> <INPUT TYPE="BUTTON" VALUE="Check spelling" NAME="button1" STYLE="visibility: hidden"> <INPUT TYPE="BUTTON" VALUE="Change case" NAME="button2" STYLE="visibility: hidden"> <BR> <INPUT TYPE="TEXT" NAME="text1"> <INPUT TYPE = "CHECKBOX" NAME = "check1" ONCLICK = "checkClicked(this)">Show all options </FORM> </BODY> </HTML> |