eliminating a global variable

[Jeff Gutsell]

I've created a site where the pages generally contain a table of
contents (site map) down the left side. When each page loads, the
first function is called. The second function populates a global var
(array) of all the links.

I try to avoid using global variables, but I am stumped how to
eliminate this one (TocLinks) because other functions need to iterate
through it. I think the answer is to create a custom object that the
other functions can access. But I need some pointers on how to
proceed.

Here's the function that the pages call initially and the 2nd function
that it calls:

function SetCurrPgLink()
{
var parElem;
var parElemUL;
var findUL;

GetPageLinks();

for (var i = 0; i < TocLinks.length; i++)
{
var x = TocLinks.href;
if (x.indexOf(CurrentPage) > -1)
{
CurrentPgIndex = i;
TocLinks.id = 'CurrentPgA';
parElem = TocLinks.parentNode;
parElem.style.backgroundColor = 'white';
findUL = parElem.parentNode.tagName.toLowerCase();
if (findUL == 'ul')
{
parElemUL = parElem.parentNode;
parElemUL.style.display = 'block';
}
parElemUL.parentNode.className = 'FolderOpenLI';
break;
}
}
}

/* fine-tune list of anchors */
function GetPageLinks()
{
var CountPgItems = 0;
var TocDivNode = document.getElementById('TocDiv');
var TocLinksAll = TocDivNode.getElementsByTagName('a');

for (var n = 0; n < TocLinksAll.length; n++)
{
if (TocLinksAll[n].parentNode.className == 'PageItem')
{
TocLinks[CountPgItems] = TocLinksAll[n];
CountPgItems++;
}
}
}

 

[Michael Winter]

[snip]

I try to avoid using global variables, but I am stumped how to eliminate
this one (TocLinks) because other functions need to iterate through it.
I think the answer is to create a custom object that the other functions
can access. But I need some pointers on how to proceed.

Nothing as complicated as that. Just return the array.

function getPageLinks() {
/* Using the document.links collection is potentially simpler
* but it's based on the assumption that checking for PageItem
* in the class attribute is sufficient to obtain the correct
* links. If not, restore your original code.
*/
var links = document.links, temp = [];
for(var i = 0, n = links.length, c; i < n; ++i) {
c = links;
/* It may be more appropriate to use indexOf, rather than using
* a normal comparison as the class attribute can contain more
* than one class name as a space-separated list.
*/
if(c.parentNode.className == 'PageItem') {
temp[temp.length] = c;
}
}
return temp;
}


var tocLinks = getPageLinks();

[snip]

findUL = parElem.parentNode.tagName.toLowerCase();
if (findUL == 'ul')

The element name is always uppercase for HTML documents, and
case-sensitive for XML-based documents. Assuming this is just HTML, it
would be quicker to use

if(parElem.parentNode.tagName == 'UL')

and omit findUL entirely.

[snip]

Hope that helps,
Mike