PDA

View Full Version : I need help debugging a relatively simple script - I have commented it fully



Gebnar
22 Jan 2008, 01:13 PM
I've done the best I can to figure out why this script doesn't work. I'm relatively new to javascript though, so that's probably the issue...
Anyway, It's a short script and I'm just going to post the entire thing here, I've included detailed comments on how things are *supposed* to work, so hopefully someone will be able to see where I went wrong.
I will also be pasting in a working script that was the inspiration for my script.

The objective of this script is to display the contents of a single file in multiple tabs on a page. The original script underneath mine does this perfectly.
However, I need to be able to have several independent tab bars on a single page. The original script works for that, but only one tab can be opened at any time on the entire page.
Tabs are arranged in the html like this:
**********************************************************
<dl> - this is a list of tabs or a tab bar
<dt> - this is the first tab title </dt>
<dd> - this is the data for the preceeding tab title</dd>
<dt> - this is a second tab title </dt>
<dd> - this is the data for the preceeding tab title</dd>
<dt> - this is a third tab title </dt>
<dd> - this is the data for the preceeding tab title</dd>
<dt> - this is a fourth tab title </dt>
<dd> - this is the data for the preceeding tab title</dd>
</dl>
**********************************************************

Here is my attempt at creating a script that should allow each different tab bar to act independently:
**********************************************************
//Run startup functions after the page loads
window.onload = windowLoad;

//create a global variable to store a list of tab bars
var tabBars;

//startup functions
function windowLoad() {
setTabBars;
setBehavior;
}

//load the global variable tabBars with the individual tab bars and tabs
function setTabBars() {
tabBars = document.getElementsByTagName('dl'); //loads all the tab bars into the variable
for ( b = 0 ; b < tabBars.length ; b++) { //for each tab bar...
dd = tabBars[b].nextChild;
t = 0;
while (dd) { //...store a list of the tabs it contains
if (dd.tagName = 'dt')
tabBars[b].tabs[t] = dd;
t++
dd = dd.nextSibling;
}
}
}

//specify how the user interacts with the tabs
function setBehavior() {
for (b = 0; b < tabBars.length; b++) {
for (t = 0; t < tabBars[b].tabs.length; t++) {
//each tab should, when clicked, pass a reference to itself, and it's container tab bar,
//onto the activateTab function
tabBars[b].tabs[t].onclick = activateTab(tabBars[b], tabBars[b].tabs[t]);
}
}
}

//specify what the tabs are supposed to do when clicked
function activateTab(tabBar,tab){
for (i = 0; i < tabBar.length; i++) { //make all the tabs in the current tab bar be closed
tabBar[i].className = "";
dd = tabBar[i].nextSibling;
dd.className = "";
}
if (!tab.className) { //check if the clicked tab is already open, if it's not, then open it
tab.className = "current";
dd = tab.nextSibling;
dd.className = "current";
} else { //if the current tab is already open, then close it
tab.className = "";
dd = tab.nextSibling;
dd.className = "";

}
}

//below this line is a slightly modified version of the original script that is the inspiration for my work above
//all credits go to A List Apart, though I do not know the original author.
//this script works perfectly
//-------------------------------------------------------
/*
window.onload = setBehavior;

function setBehavior(){
tabs = document.getElementsByTagName('dt');
for (t=0;t < tabs.length; t++ ){
tabs[t].onclick = activateTab;
}
};

function activateTab(){
if (this.className != "current") {
tabs = document.getElementsByTagName('dt');
for (t = 0; t < tabs.length; t++) {
if (tabs[t].className == 'current') {
tabs[t].className = "";
}
}
page = document.getElementsByTagName('dd');
for (t = 0; t < page.length; t++) {
if (page[t].className == 'current') {
page[t].className = "";
}
}
this.className = "current";
dd = this.nextSibling;
if (dd.nodeType != 1) {
dd = dd.nextSibling;
}
dd.className = "current";
}
else {
this.className = "";
dd = this.nextSibling;
if (dd.nodeType != 1) {
dd = dd.nextSibling;
}
dd.className = "";
}
};
*/
**********************************************************