Javascript - switch and toggle
Please note: these scripts are old and obtrusive. Unobtrusive javascript is better.
Switch 1
Oh my God!
I can't believe they voted for that fool!
We're doomed!
Switch 2
Telephone: 022 7123 4567
Telephone: 020 8987 6543
Toggle
Javascript
function switch1(div)
{
if (document.getElementById('one'))
{
var option=['one','two','three'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
//
function switch2()
{
var option=['tel1','tel2'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.className=(obj.className=="visible")? "hidden" : "visible"; }
}
function toggle(div)
{
var option=['wine1','beer1','whisky1'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; }
}
window.onload=function(){switch1('one');}
HTML
<h1>Javascript - switch and toggle</h1>
<p>Please note: these scripts are old and obtrusive. <a href="br.php?page=togglit">Unobtrusive javascript</a> is better.</p>
<div id="buttons">
<div id="switch1">
<h2>Switch 1</h2>
<input type="button" value="one" onclick="switch1('one')" />
<input type="button" value="two" onclick="switch1('two')" />
<input type="button" value="three" onclick="switch1('three')" />
<div id="one">
<p>Oh my God!</p>
</div>
<div id="two">
<p>I can't believe they voted for that fool!</p>
</div>
<div id="three">
<p>We're doomed!</p>
</div>
</div>
<div id="switch2">
<h2>Switch 2</h2>
<input type="button" value="switch" onclick="switch2()" />
<div id="tel1" class="visible"><p>Telephone: 022 7123 4567</p></div>
<div id="tel2" class="hidden"><p>Telephone: 020 8987 6543</p></div>
</div>
<div class="clear"></div>
<div id="toggle">
<h2>Toggle</h2>
<input type="button" onclick="toggle('wine1')" value="wine" />
<input type="button" onclick="toggle('beer1')" value="beer" />
<input type="button" onclick="toggle('whisky1')" value="whisky" />
<div id="wine1"><img src="wine1.jpg" alt="wine" /></div>
<div id="beer1"><img src="beer1.jpg" alt="beer" /></div>
<div id="whisky1"><img src="whisky1.jpg" alt="whisky" /></div>
</div>
</div>
CSS
.visible {display:block;}
.hidden {display:none;}
#buttons {height:300px;}
#buttons div {text-align:center;}
#wine1, #beer1, #whisky1, #two, #three {display:none;}
#switch1, #switch2 {width:48%;}
#switch1 {float:left;}
#switch2 {float:right;}
Comments
#1 #2The BUTTON element submits the form:
<form action="http://www.yahoo.com">
<button>Yahoo</button>
</form>
Just like the INPUT TYPE="SUBMIT" and INPUT TYPE="IMAGE"
Should be switching to: INPUT TYPE="BUTTON"
I'm sorry, I'm a bit slow. What exactly is your point here?
My point is that if the user put your code in a FORM, it would produce a result like this...
Misued BUTTON tag within a FORM:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Misused BUTTON tag</title>
<script type="text/javascript">
function switch1(div)
{
if (document.getElementById('one'))
{
var option=['one','two','three'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option["" + i + ""]);
obj.style.display=(option[""+ i+ "" ]==div)? "block" : "none"; }
}
}
</script>
</head>
<body>
<form action="http://www.yahoo.com">
<div>
<button onclick="switch1('one')">one</button>
<button onclick="switch1('two')">two</button>
<button onclick="switch1('three')">three</button>
</div>
<div id="one"><p>Oh my G-d!</p></div>
<div id="two" style="display:none;"><p>I can't believe they voted for that fool!</p></div>
<div id="three" style="display:none;"><p>We're doomed!</p></div>
</form>
</body>
</html>
Correction using the INPUT element within a FORM so as to prevent unwanted FORM submitting:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<script type="text/javascript">
function switch1(div)
{
if (document.getElementById('one'))
{
var option=['one','two','three'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[""+i+""]);
obj.style.display=(option[""+i+""]==div)? "block" : "none"; }
}
}
</script>
</head>
<body>
<form action="http://www.yahoo.com">
<div>
<input type="button" onclick="switch1('one')" value="one">
<input type="button" onclick="switch1('two')" value="two">
<input type="button" onclick="switch1('three')" value="three">
</div>
<div id="one"><p>Oh my G-d!</p></div>
<div id="two" style="display:none;"><p>I can't believe they voted for that fool!</p></div>
<div id="three" style="display:none;"><p>We're doomed!</p></div>
</form>
</body>
</html>
My point, if it is not already clear at this point from my code,
is that it is better to use the INPUT element in this code than the BUTTON element.
You can argue that the code works and there is nothing wrong with it.
However, if a user put your code in a FORM,
they will be wondering why clicking the BUTTON in order to toggle the DIV's display submits the FORM unwantedly
and you shouldn't get used to using the ONCLICK event handler of the BUTTON element for this reason but rather the INPUT element.
Gotcha. Point taken. I'll change it soon.
Thanks for the input. 
Looking good 
It now has my approval.
Thank you for this! One thing...
window.onload=function(){switch1('one')}
should be
window.onload=function(){switch1('one');}
Chris,
Good point. **sorted**
2Ultimater and BonRouge:
if, in the end of the button code you add a line:
return false;
it would not matter if you use button, image or submit INPUT, or BUTTON
sorry for the wierd english, i smoked a lot )
ps. no problem, i will "include today's word in my message"
pps. and remove my prev saying that your antispam protection sucks
pppps for my first message:
...and switch a line:
<input type="button" onclick="switch1('one')" value="one">
to this one:
<input type="button" onclick="return switch1('one')" value="one">
for better reslts
SmarTy,
First message: Yeah, maybe that would do the trick.
Second message: The anti-spam protection works fine for me. Enjoy your smoke and don't worry about it.
Third message: Oh.
Stuart,
Do you mean like this?