Menu
I have attached a script below that I would like to improve.
In the ‘HideRange()’ function, the top (currently un-commented) section works as desired.
I would like to replace it with the bottom section of the function (currently commented out)
My idea is that I would like to get to the style section of the <div>s which are enclosed within the <div id=”contents”> tag. My problem is that the alerts in the bottom section return ‘0’ as the number of elements in the ‘AllContentDivs’ variable.
The forum members helped me solve a similiar problem with the ID and NAME tags,
so I’m back to dip into the well again. ?
(See: [url]http://www.webdeveloper.com/forum/showthread.php?t=151277
Is what I want to do feasible or impossible?
Thanks for any thoughts.
[code=php]
<html>
<head>
<title>Test DIV Sections</title>
<style type=”text/css”>
div.divSect {
display:none;
height:100;
width:300;
}
</style>
<script type=”text/javascript”>
function Toggle(Info) {
HideRange();
var CState = document.getElementById(Info);
if (CState.style.display == “none”) { CState.style.display = “block”; }
else { CState.style.display = “none”; }
}
function HideRange() {
/* This part works, but wish to replace it with automatic code below*/
/* */
document.getElementById(‘RequestINFO’).style.display=’none’;
document.getElementById(‘PresentINFO’).style.display=’none’;
document.getElementById(‘ArticleINFO’).style.display=’none’;
/* */
/* following should to above automatically */
/*
var ContentObj = document.getElementById(‘contents’);
// neither of the following 2 lines work — both return a ‘0’ in the alert
// var AllContentDivs = document.getElementsByTagName(ContentObj.tag); alert(AllContentDivs.length);
// var AllContentDivs = document.getElementsByTagName(ContentObj.div); alert(AllContentDivs.length);
for (i=0; i<AllContentDivs.length; i++) { AllContentDivs[i].style.display=”none”; }
*/
}
function getRBtn(ids) {
var obj = document.getElementById(ids);
var sel = document.getElementsByName(obj.name);
var fnd = -1;
var str = ”;
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above
return str;
}
</script>
</head>
<body>
<h1>Section Display</h1>
<span style=”font-size:1.5em”>Select:</span>
<label for=”RSection”>
<input type=”radio” id=”RSection” name=”Selections” value=”RequestINFO”
onChange=”Toggle(this.value)”> Requests </label>
<label for=”PSection”>
<input type=”radio” id=”PSection” name=”Selections” value=”PresentINFO”
onChange=”Toggle(this.value)”> Publications </label>
<label for=”ASection”>
<input type=”radio” id=”ASection” name=”Selections” value=”ArticleINFO”
onChange=”Toggle(this.value)”> Articles </label>
<div id=”contents”>
<div id=”RequestINFO” class=”divSect” style=”background-color:#ffff00″>Information Request Section</div>
<div id=”PresentINFO” class=”divSect” style=”background-color:#ff00ff”>Information Presentation Section</div>
<div id=”ArticleINFO” class=”divSect” style=”background-color:#00ffff”:>Information Article Request Section</div>
</div>
</body>
</html>