Function with loop calling itself

Question

I have a function, in which there is a loop which calls up the function.

function displayItem(item, isChild)
{
    if (isChild)
    {
        writeOutput('<li>' & item.name & '</li>');
    }
    else
    {
        writeOutput('<li>' & item.name);
    }
    try
    {
        if (item.hasChild)
        {
            writeOutput('<ul>');
            numberOfItems = item.numChildren;
            for (x=1;x LT numberOfItems;x++)
            {
                displayItem(item.child[x], true);
            }
            writeOutput('</ul>');
        }
    }
    catch(Exception e){}
    writeOutput('</li>');
} 

After the function is executed, the loop continues off of the value of x from that execution, rather than picking up where it left off before.

For instance: x is 3. displayItem is passed "item.child[3]" and true. It works through the function, enters the loop, performs the loop up to x = 4, then falls out of the loop. The function ends and (from what I understand) returns back to the point where x should be 3. Instead of picking up from 3, adding one (making it 4) and then performing the loop again, it picks up from 4 (the value from the "internal" recursively called loop).

I know that sounds incoherent, but I can't think of any other way to explain it.

Is there something I'm doing wrong, or is this just a fact of life and something I have to work around?

UPDATE: After looking at it more, it appears as though the earliest loop is exiting early. Using a local variable for 'x' fixed the counting issue, but the loop just exits at 4 if looking at the previous example. It leaves before the condition is met. Any ideas?

Answer 1

You forgot to make x local to the function.

Don't use global variables. Avoid them like the plague.

Answer 2

Try this

function displayItem(item, isChild)
{
   var x = 0;
   var numberOfItems = 0;

   if (isChild).......................
} 

Answer 3

The problem is this line:

numberOfItems = item.numChildren;

When returning from the second call, this value is not changed back to the proper value. So if numberOfItems is set to 4 when the function is called up by itself, after it has completed and returned to the original instance of the function, numberOfItems is still 4.

this code works:

function displayItem(item, isChild)
{
    var x = 1;
    if (isChild)
    {
        writeOutput('<li>' & item.name & '</li>');
    }
    else
    {
        writeOutput('<li>' & item.name);
    }
    try
    {
        if (item.hasChild)
        {
            writeOutput('<ul>');
            for (x=1;x LT item.numChildren;x++)
            {
                displayItem(item.child[x], true);
            }
            writeOutput('</ul>');
        }
    }
    catch(Exception e){}
    writeOutput('</li>');
}