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

Toggle

wine
beer
whisky
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
2006-04-18 BonRouge says :

Stuart,
Do you mean like this?

#2
2006-04-21 Ultimater says :

The 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"

#3
2006-04-22 BonRouge says :

I'm sorry, I'm a bit slow. What exactly is your point here?

#4
2006-04-23 Ultimater says :

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>

#5
2006-04-23 Ultimater says :

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.

#6
2006-04-23 BonRouge says :

Gotcha. Point taken. I'll change it soon.

Thanks for the input. smile

#7
2006-05-05 Ultimater says :

Looking good thumbs up
It now has my approval.

#8
2006-05-10 Chris says :

Thank you for this! One thing...

window.onload=function(){switch1('one')}

should be

window.onload=function(){switch1('one');}

#9
2006-05-10 BonRouge says :

Chris,
Good point. **sorted**

#10
2007-12-02 SmarTy says :

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
smile

#11
2007-12-02 SmarTy says :

sorry for the wierd english, i smoked a lot smile)

ps. no problem, i will "include today's word in my message" smile
pps. and remove my prev saying that your antispam protection sucks smile

#12
2007-12-02 SmarTy says :

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 smile

#13
2007-12-03 BonRouge says :

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.

Comment form

Please type the word 'wife' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url