Joseph wrote:
No, that's how it should look like:
function show_hide_Div(theDiv,TheDivToShow) {
alert(theDiv+'\n'+TheDivToShow);
if (document.getElementById) {
var elDiv = document.getElementById(theDiv);
} else if (document.all){
var elDiv = document.all(theDiv);
}
if (document.getElementsByTagName()) {
var elChildElement = elDiv.getElementsByTagName("span");
}
for (var x = 0; elDiv.childNodes[x]; x++) {
You have an error here, I think you mean
for (var x = 0; x<elChildElement.length; x++) {
...
var elDiv_childNodes = document.all(elDiv.childNodes[x]);
But here is another error. elDiv.childNodes[x] will reference a
span, you can't use it as a parameter for document.all.
As a tip, forget that document.all ever existed. Do not use it
at all, ever.
Below is a slab of your code modified to use the class name to
identify the spans to hide. Remember, you *can not* give spans
a name, it creates invalid markup and whilst browsers are
forgiving enough to allow you to do it, you can't depend on it
or any subsequent behaviour.
Note the use of a regular expression to match the class name.
This is so it will match the full word and allows you to put
other classes on the element to change its appearance. You
don't actually have to have a class of that name specified
anywhere. My reading of the HTML spec is that this is the kind
of use that class name is supposed to be used for, but it seems
that applying CSS is about the only use it gets.
One radio button should be selected by default, so I made one
selected and added an initialization function that hides the
unselected ones on page load (actually it looks for the selected
button and clicks it to run whatever onclick event is associated
with the button).
Finally, I've made it so the inputs to appear in the same place
(i.e. take up no room on the page when hidden), I changed:
el.style.visibility = 'hidden';
to
el.style.display = 'none';
and to show them again:
el.style.visibility = 'visible';
to
el.style.display = '';
Change them back if this isn't what you want.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html><head>
<title>Stuff</title>
<meta http-equiv='Content-Type'
content='text/html; charset=ISO-8859-1'>
</head>
<body>
<script type="text/javascript">
function checkRadio(f){
// empty function
}
// DynWrite support for old IE
if((!document.getElementById) && document.all){
document.getElementById = function(id){
return document.all[id];};
}
// d=div id, c=span class, s=span id
function show_hide_Div(d, c, s){
// Get a ref to the div
var elDiv = document.getElementById(d);
// Get all the spans in the div
if (document.getElementsByTagName) {
var elChildElement = elDiv.getElementsByTagName('span');
}
// Hide any span that matches the class name
// but doesn't match the id
var el;
var i = elChildElement.length;
// This will match the classname as a whole word only, so
// you can add other classes to the style to change the
// appearance of the element
var cReg = new RegExp('\\b' + c + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != s ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}
// initialise form
function initButtons(f) {
var el = document.forms[f].elements;
var i = el.length;
while (i--){
if ( /radio/.test(el[i].type) && el[i].checked) {
el[i].click();
}
}
}
</script>
<form name="form1" id="form1" method="post" action="">
<p>
<label><input type="radio" name="RadioGroup"
value="IPConfig" checked onClick="
checkRadio(this.form.name);
show_hide_Div('idMain','IPButton','spanidConfig');
">IP Config</label>
<label><input type="radio" name="RadioGroup"
value="IPPing" onClick="
checkRadio(this.form.name);
show_hide_Div('idMain','IPButton','spanidPing');
">Ping</label>
<label><input type="radio" name="RadioGroup"
value="IPPing" onClick="
checkRadio(this.form.name);
show_hide_Div('idMain','IPButton','spanidTracert') ;
">Tracert</label>
</p>
</form>
<DIV id="idMain">
<span class="IPButton" id="spanidConfig">
<input type="text" id="idConfig" value="" size="30">
<input type="button" value=" IP Config " onclick="
DoIP_Config();
show_hide_Div('idMain','IPButton' ,'spanidConfig');
"><br>
</span>
<span class="IPButton" id="spanidPing">
<input type="text" id="idPing" value="" size="30">
<input type="button" value=" Ping " onclick="
Do_Ping();
show_hide_Div('idMain','IPButton','spanidConfig');
"><br>
</span>
<span class="IPButton" id="spanidTracert">
<input type="text" id="idTracert" value="" size="30">
<input type="button" value=" Tracert " onclick="
Do_Tracert();
show_hide_Div('idMain','IPButton','spanidConfig');
"><br>
</span>
</DIV>
<script type="text/javascript">
// Call initialise function. Should be right after
// all relevant elements have been loaded.
initButtons('form1');
</script>
</body>
</html>
--
Rob
