Sample of one right way to do this:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Planets</title>
</head>
<body>
<div>
<form id="myForm">
<select name="choose">
<option>--choose a planet--</option>
<option> Mercury </option>
<option> Venus </option>
<option> Earth </option>
<option> Barsoom </option>
<option> Jupiter </option>
</select>
<div id="info" style="display: none;">
The planet <span id="pname"></span>:<br/>
<span id="pinfo"></span>
<br/><br/>
For more information, <a id="plink" target="PLANET">click here</a>
<hr/>
<input type="button" name="pmoons" value="How many moons?"/>
</div>
</form>
</div>
<script type="text/javascript">
(
function( )
{
var planets = {
Mercury : "Closest to the sun, it is the hottest planet.",
Venus : "About the same size as Earth, it is too hot for us.",
Earth : "We live here. What more do you want to know?",
Barsoom : "Edgar Rice Burrough gave Mars this alternative name.",
Jupiter : "The largest of the planets."
}
var moons = {
Mercury : 0,
Venus : 0,
Earth : 1,
Barsoom : 2,
Jupiter : "(as of January 2009) 49 officially named"
}
var divinfo = document.getElementById("info");
var spaninfo = document.getElementById("pinfo");
var form = document.getElementById("myForm");
var planet = "";
form.choose.onchange = function( )
{
if ( this.selectedIndex == 0 )
{
divinfo.style.display = "none";
return;
}
planet = this.options[this.selectedIndex].text.replace(/\s/g,"");
document.getElementById("pname").innerHTML = planet;
spaninfo.innerHTML = planets[planet];
document.getElementById("plink").href =
"http://en.wikipedia.org/wiki/" + planet;
divinfo.style.display = "block";
}
form.pmoons.onclick = function( )
{
spaninfo.innerHTML = "Has " + moons[planet] + " moon(s)";
}
}
)();
</script>
</body>
</html>