(infinite?) loop in javascript code

Question

I have the following JavaScript code to "display" XML on a website:

function createChild(node,tabindex){

    var child = node.childNodes;

    var r = '';

    var tabs = '';

    for(i=0;i<tabindex;i++){

        tabs += "\t";

    };

    for(i=0;i<child.length;i++){

        if(child[i].nodeType == 1){

            r += tabs+"&lt;"+child[i].nodeName+"&gt;\n";

            if(child[i].hasChildNodes()){ r += createChild(child[i],1); }; // here is where it fails!

            r += tabs+"&lt;/"+child[i].nodeName+"&gt;\n";

        }

    }

    return r;

 };


function parseXML(xml){

    var doc = new DOMParser().parseFromString(xml,'application/xml');

    var node = doc.getElementsByTagName('*')[0];

    var r = '';

    r += "&lt;<span class=\"highlight highlight-blue\">"+node.nodeName+"</span>&gt;\n";

    if(node.hasChildNodes()){ r += createChild(node,1); };

    r += "&lt;<span class=\"highlight highlight-blue\">/"+node.nodeName+"</span>&gt;\n";

    $('.viewer').html(r);
};

This works fine on XML like this:

<properties>
    <property></property>
</properties>

But it fails to work when there is more than one child like this:

<properties>
    <property>
        <value></value>
    </property>
</properties>

The code keeps running until my browser crashes. I think there is an infinite loop in it, but I'm not sure. Does anyone have a tip for me?

"I think there is an infinite loop in it, but I'm not sure" You can use your debugger and then you will know. — takendarkk
– takendarkk, Commented Aug 3, 2017 at 15:35
browser crashes when I launch the code. My console is not showing anything. — user8313545
– user8313545, Commented Aug 3, 2017 at 15:36
So put a breakpoint on the first line of code and stop letting it execute... — takendarkk
– takendarkk, Commented Aug 3, 2017 at 15:37
when I remove the following "r += createChild(child[i],1);" and I put in a console.log('text')... I works. So the problem is with the createChild function obviously. But I'm asking this question because I cannot find the problem. — user8313545
– user8313545, Commented Aug 3, 2017 at 15:39

PeterMader · Accepted Answer · 2017-08-03 15:44:55Z

3

This is why you should always declare your variables:

// declare 'i'
for(var i = 0; i < tabindex ; i++){
  tabs += "\t";
};

If you don't declare i in the function scope, it will be global, thus interfering with the for loop in a recursive function call:

The i variable is set to 0 in the first function call.
The function is calls itself.
The i variable is set to 0.
The function returns.
i is now 0 again, so the loop in the first frame will run forever.

So somewhere in the createChild function, you have to declare i, either before the first loop or in the first loop. You can also use let.

answered Aug 3, 2017 at 15:44

PeterMader

7,3352 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

(infinite?) loop in javascript code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related