Too Much Recursion error in DOM Create & Remove Script

[RMWChaos]

Firebug is reporting "too much recursion" when I attempt to create a child element in a parent that doesn't exist yet. The script should automatically create the missing parent before going on to create the child element. At the point where the script is supposed to call itself with the new properties to create the parent, it gives me the error and looks like it's looping the function continuously.

It seems that "id : attrib[1]" (line 192) is not being passed back into createDOM(). So, either a script cannot call itself, or I am missing something in this code. I tried setting attrib[1] to a global variable and passing the variable to the second instance of createDOM(), but that didn't work either. It should entirely skip this section of code in the second instance because !parentExist is false at that point. The only reason this section of code runs is if !parentExist and parent (attrib[1]) != 'body' are both true. Any ideas?

/* **************************************** */
/* **** Begin: DOM Add/Remove Functions *** */
/* **************************************** */
 
 
 
/* **** Remove DOM Element Function ******* */
function removeDOM(id)
 
    {
 
    var idExist = document.getElementById(id);
 
    /* **** Element does not exist, escape **** */
    if (!idExist)
 
        {
 
        return;
 
        }
 
    /* **** Remove the element **************** */
    else
 
        {
 
        removeDOM(idExist);
 
        };
 
    };
 
 
/* **** Create DOM Elements Function ****** */
function createDOM(attrib)
 
    {
 
    var defaultAttribs = 
 
        {
 
        'dom'      :     'div',
 
        'parent'   :     'body',
 
        'id'          :     null,
 
        'alt'         :     null,
 
        'src'        :     null,
 
        'method'  :     null,
 
        'type'      :     null,
 
        'value'     :     null,
 
        'size'      :     null,
 
        'name'    :     null,
 
        'text'      :     null,
 
        'onclick' :     null,
 
        'pSelect' :     null
 
        };
 
    for (var index in defaultAttribs)
 
        {
 
        if((typeof attrib[index] == 'undefined') && (attrib[1] != 'body'))
 
            {
 
            attrib[index] = defaultAttribs[index];
 
            };
 
        };
 
    var idExist = document.getElementById(attrib[2]);
 
    var parentExist = document.getElementById(attrib[1]);
 
    var createElement = document.createElement(attrib[0]);
 
    /* **** createElement to createTextNode *** */
    if (attrib[0] == 'text')
 
        {
 
        createElement = document.createTextNode(attrib[10]);
 
        };
 
    /* **** Set Element id ******************** */
    if (attrib[2] != null)
 
        {
 
        createElement.id = attrib[2];
 
        };
 
    /* **** Create script in document.head **** */
    if (attrib[0] == 'script')
 
        {
 
        createElement.src = attrib[4];
 
        parentExist = document.getElementsByTagName('HEAD')[0];
 
        };
 
    /* **** Set parentExist to Body Element *** */
    if (attrib[1] == ('body' || null))
 
        {
 
        /* **** W3C HTML DOM Level 1+ Standard **** */
        if (document.getElementsByTagName)
 
            {
 
            parentExist = document.getElementsByTagName('BODY')[0];
 
            }
 
        /* **** Microsoft Implementation Shortcut * */
        else if (document.body)
 
            {
 
            parentExist = document.body;
 
            }
 
        /* **** Netscape Navigator 4+ ************* */
        else if (document.layers)
 
            {
 
            parentExist = document.tags['BODY'];
 
            };
 
        };
 
    /* **** Element is an Image with pSelect ** */
    if ((attrib[0] == 'img') && attrib[12])
 
        {
 
        createElement.id = page[attrib[12]] + 'img';
 
        createElement.alt = attrib[3];
 
        createElement.title = attrib[3];
 
        createElement.src = attrib[4];
 
        createElement.onmouseover = 'mouseOver(' + attrib[12] + ')';
 
        createElement.onmouseout = 'mouseOut(' + attrib[12] + ')';
 
        createElement.onclick = onclick;
 
        };
 
    /* **** Element Exists & Not Adding Text ** */
    if (idExist && (attrib[0] != 'text'))
 
        {
 
        return;
 
        };
 
    /* **** Create Parent or Target Element *** */
    if (!parentExist)
 
        {
 
        createDOM({
 
            'id'     :     attrib[1]
 
            });
 
        };
 
    /* **** Create form element *************** */
    if (attrib[0] == 'form')
 
        {
 
        createElement.name = attrib[2];
 
        createElement.action = attrib[4];
 
        createElement.method = attrib[5];
 
        };
 
    /* **** Create input elements for form **** */
    if (attrib[0] == 'input')
 
        {
 
        createElement.form = attrib[1];
 
        createElement.type = attrib[6];
 
        /* **** Input is Submit or Reset button *** */
        if (attrib[7] == ('Submit' || 'Reset'))
 
            {
 
            createElement.alt = attrib[3];
 
            /* **** Cross-browser Support for NN ****** */
            createElement.title = attrib[3];
 
            createElement.src = attrib[4];
 
            createElement.value = attrib[7];
 
            }
 
        /* **** Set the size of data input field ** */
        else
 
            {
 
            createElement.size = attrib[8];
 
            };
 
        };
 
    /* **** Create new element **************** */
    parentExist.appendChild(createElement);
 
    };
 
 
/* **************************************** */
/* **** End: Load DOM Elements ************ */
/* **************************************** */
 

[gits]

hi ...

at first a small hint ... you may use the object 'attrib' that you have created an other way:

var attrib = {
    id   : 'whatever',
    prop1: 'whatever2'
};
 
// to loop and alert the property-name and its value
for (var idx in attrib) {
    alert(idx + ' = ' + attrib[idx]);
}
 
// refer to a property by name to alert its value
alert(attrib.id);
 

so you have to refer by name instead of refering by index when you want to check a property value ...

i think your script is not working ... because attrib[0] etc. is always undefined ... rewrite your code the way the example shows you ... and it should work :)

kind regards

[RMWChaos]

so you have to refer by name instead of refering by index when you want to check a property value ...

i think your script is not working ... because attrib[0] etc. is always undefined ... rewrite your code the way the example shows you ... and it should work :)

Aha! Okay, thanks again, gits. I will give this a try later on today. You'll make an expert JS coder out of me yet. =D

[gits]

Aha! Okay, thanks again, gits. I will give this a try later on today. You'll make an expert JS coder out of me yet. =D

:) ... post back in case you have more problems with it ...

[RMWChaos]

click 'ok'...repeat

:) ... post back in case you have more problems with it ...

click 'ok'...repeat

That was a really MEAN joke, gits!!!

click 'ok'...repeat

Now my browser is locked in an infinite loop of alerts thanks to the recursion problem.

click 'ok'...repeat

Next time, tell me which code you want me to change and which code is just for example.

click 'ok'...repeat

I'll find a way to get you back!

click 'ok'...repeat

Mark my words.

click 'ok'...repeat

[gits]

... now :) 'ok' whats the problem now? you should try to trace what attrib[0] is ... it will be undefined ... it think ... so use attrib.id or attrib.src etc. instead ...

[RMWChaos]

... now :) 'ok' whats the problem now?

Just another one of those ID-10-T errors I seem to cause all the time. Things are going better now. The recursion error is gone, thanks to your advice: attrib.id, etc. fixed it.

Now just trying to find out why "parentExist has no properties", which occurs in the very last line of code to create the element. I will figure it out, though, and let you know.

Thanks again for coming to my rescue!

[RMWChaos]

Well, I am beginning to get a clue about what is wrong here. When I run any of these alerts:

alert(document.getElementsByTagName('BODY')[0]); // Returns 'undefined'
alert(document.getElementsByTagName('BODY').item(0)); // Returns 'null'
alert(document.body); // Returns 'undefined'
alert(typeof document.getElementsByTagName('BODY')[0]); // Returns 'undefined'
alert(typeof document.getElementsByTagName('HEAD')[0]); // Returns [object]
 

HEAD works, BODY doesn't in either IE, FF, or NN, even if I put the code directly in my html wrapped in <script>.

Wha-!? What is going on here?

[RMWChaos]

DUH!!!!

Now it all makes sense. The reason that my scripts can't see the body element is because it hasn't been instantiated yet! During testing, I was calling my scripts from within HEAD, and the page hadn't loaded BODY yet.

DOH! smacks forehead

[gits]

you should always use the body's onload event to start scripts that are supposed to do dom-manipulations

kind regards

[RMWChaos]

you should always use the body's onload event to start scripts that are supposed to do dom-manipulations

Everything I've read says that you do not want to use <body onload="">, but for other reasons that I don't recall. Maybe we should have an open discussion on that under a new topic and see what the community has to say about it. I would sure like to hear their opinions on the matter. Additionally, I can't use onload because I have multiple scripts to load.

I have re-enabled my addEvent() script, which handles all my script loading for me; so all is mostly okay now. Still a few bugs to work out, though...as always.

Thanks again!

[gits]

its a simple matter to load multiple scripts onload ... simply write an init function that calls everything you need to have performed ... and i did never hear of something that says that we shouldn't use the body's onload of a page. it is the best place to have a reliable point to use the dom of a page ... there are some onloads that are not that good :) the onload of images for example ... but to use the body's onload event is the common way of starting scripts for a page ...

[RMWChaos]

Okay, so it wasn't really everything I've read, but I did read something that discussed why it is a "bad" thing to use onload, probably for the reason you mentioned.

I've seen it done this way inside the body (on MSDN) too:

<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
 

[gits]

it's probably not a good idea to use the handlers that standard-way like:

<node onclick="func()"/>

because it is much better to use a generalized event handling ... therefore you may use attachEvent() and addEventListener() ... i've never saw the line you refer ... and i don't think that it complies to any standard ... and i think that there is no reason (and i didn't mention any :) ) not to use the body onload ... i always use it and i never had any difficulties with it ...

[RMWChaos]

I meant what you said about using onload for images, because it wouldn't load them until the page renders completely, and that can make the page appear sluggish.