Hi,
I'm very new to javascript, and I'm having trouble finding a way to display a string of divs without the code getting really messy.
I have several different pages to write, each with about 15-20 divs, and I need users to be able to select a sequence of divs - basically like a series of yes/no questions that, when "yes" or "no" is selected, displays the appropriate div as well as what's come before it.
I can hide all divs and display one, no problem. But thats no good cause a user needs to be able see the all the divs which have been selected in sequence.
I can hide each one individually and show the ones I need individually, but this is going to get messy with long strings of actions for each onclick.
I understand you can set up an array in the head of the page and use a hideall function like the one below, but the problem here is this: the platform used to view the pages requires a template to be used for each page, and the head section can only be located in the template itself, not the page body. So, I can create a template and store the javascript in the head section, but if I make an array then each page has to have the same number of divs, and they all have to have the same ids.
So unless I'm missing something, an array in the head section won't work either unless there's a way you can set an array without naming each div in it. (and I don't want to create a new template for each page).
So the question is, how do I make a simple hideall function given that I can't define an array in the head section?
(I've also tried putting the array in the body, but the viewing platform doesn't accept this for some reason)
I've tried a few different scripts, but the one I like best is below, taken from another post in these forums -
[HTML]<SCRIPT LANGUAGE="JavaS cript">
//here you place the ids of every element you want.
var ids=new Array('A','B',' C');
function switchid1(id){
hideallids1();
showdiv1(id);
}
function hideallids1(){
//loop through the array and hide each element by id
for (var i=0;i<ids.lengt h;i++){
hidediv1(ids[i]);
}
}
function hidediv1(id) {
//safe function to hide an element with a specified id
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'none';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'none';
}
else { // IE 4
document.all.id .style.display = 'none';
}
}
}
function showdiv1(id) {
//safe function to show an element with a specified id
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'block';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'block';
}
else { // IE 4
document.all.id .style.display = 'block';
}
}
}
</SCRIPT>
</head>
<body>[/HTML]
I'm very new to javascript, and I'm having trouble finding a way to display a string of divs without the code getting really messy.
I have several different pages to write, each with about 15-20 divs, and I need users to be able to select a sequence of divs - basically like a series of yes/no questions that, when "yes" or "no" is selected, displays the appropriate div as well as what's come before it.
I can hide all divs and display one, no problem. But thats no good cause a user needs to be able see the all the divs which have been selected in sequence.
I can hide each one individually and show the ones I need individually, but this is going to get messy with long strings of actions for each onclick.
I understand you can set up an array in the head of the page and use a hideall function like the one below, but the problem here is this: the platform used to view the pages requires a template to be used for each page, and the head section can only be located in the template itself, not the page body. So, I can create a template and store the javascript in the head section, but if I make an array then each page has to have the same number of divs, and they all have to have the same ids.
So unless I'm missing something, an array in the head section won't work either unless there's a way you can set an array without naming each div in it. (and I don't want to create a new template for each page).
So the question is, how do I make a simple hideall function given that I can't define an array in the head section?
(I've also tried putting the array in the body, but the viewing platform doesn't accept this for some reason)
I've tried a few different scripts, but the one I like best is below, taken from another post in these forums -
[HTML]<SCRIPT LANGUAGE="JavaS cript">
//here you place the ids of every element you want.
var ids=new Array('A','B',' C');
function switchid1(id){
hideallids1();
showdiv1(id);
}
function hideallids1(){
//loop through the array and hide each element by id
for (var i=0;i<ids.lengt h;i++){
hidediv1(ids[i]);
}
}
function hidediv1(id) {
//safe function to hide an element with a specified id
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'none';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'none';
}
else { // IE 4
document.all.id .style.display = 'none';
}
}
}
function showdiv1(id) {
//safe function to show an element with a specified id
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.display = 'block';
}
else {
if (document.layer s) { // Netscape 4
document.id.dis play = 'block';
}
else { // IE 4
document.all.id .style.display = 'block';
}
}
}
</SCRIPT>
</head>
<body>[/HTML]
Comment