JavaScript + recursive function returning undefined

Question

I have a simple html structure that I need to traverse. For some reason my recursive function returns 'undefined' on any nested nodes, but not for parent nodes. Unfortunately this needs to be native js, no jQuery for this one. Thanks!

HTML:

<div id="container">
  <div id="head"> 
    <span id="left"><</span> 
    <span id="right">></span> 
  </div>
</div>

Script:

var h = hasId(container, 'head');
var l = hasId(container, 'left');
var r = hasId(container, 'right');

console.log(h + " : " + r + " : " + l);
//[object HTMLDivElement] : undefined : undefined

function hasId(ele, id) {
    for (var i = 0; i < ele.childNodes.length; i++) {
        var child = ele.childNodes[i];
        if(child.id == id) return child;
        else hasId(child, id);
    }
}

Does this answer your question? undefined returned from function — outis
– outis, Commented Oct 14, 2021 at 14:48

Pierre · Accepted Answer · 2012-05-25 23:30:15Z

15

You are simply the call to return on the recursive call. Also, you should test whether its result is defined. If yes, you can return it, or continue looping if not.

var h = hasId(container, 'head');
var l = hasId(container, 'left');
var r = hasId(container, 'right');

console.log(h + " : " + r + " : " + l);
//[object HTMLDivElement] : undefined : undefined

function hasId(ele, id) {
    for (var i = 0; i < ele.childNodes.length; i++) {
        var child = ele.childNodes[i];
        if(child.id == id) return child;
        else {
          var next = hasId(child, id);
          if(next) return next;
        };
    }
}

edited May 25, 2012 at 23:30

answered May 25, 2012 at 23:14

Pierre

6,1725 gold badges34 silver badges54 bronze badges

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

3 Comments

Alnitak Over a year ago

your code is right, but you've fixed a much more subtle bug without explaining why. It's not just a missing return, as I had originally answered, but the fact that this return only happens if the result of the recursion was itself defined.

Pierre Over a year ago

You're welcome =) On recursive call, the loop should continue if the result is undefined. So returning it directly doesn't work.

afreeland Over a year ago

Thanks!!! Worked great...made sense once I read through this example, much appreciated.

Alnitak · Accepted Answer · 2012-05-25 23:19:40Z

6

The else clause should return the value of hasId(child, id), but only if that value is itself defined, otherwise it has to continue through the loop.

Without a return the function will recurse, but not give an answer.

edited May 25, 2012 at 23:19

answered May 25, 2012 at 23:11

Alnitak

341k72 gold badges420 silver badges503 bronze badges

4 Comments

Paul Phillips Over a year ago

Just putting else return hasId(...) does not work. Pierre's answer, checking that the answer is defined, is correct.

Alnitak Over a year ago

@PaulPhillips I spotted that just now too, but even Pierre's answer is incomplete - it never unwinds the recursion properly.

Alnitak Over a year ago

@PaulPhillips ah, no, Pierre's answer does appear to fix that.

Paul Phillips Over a year ago

Ha, I didn't actually read it. On the test input @worked gave, it succeeds: jsfiddle

Willem D'Haeseleer · Accepted Answer · 2012-05-25 23:30:47Z

0

You can fix it like this :

var h = hasId(container, 'head');
var l = hasId(container, 'left');
var r = hasId(container, 'right');

console.log(h + " : " + r + " : " + l);

function hasId(ele, id) {
    for (var i = 0; i < ele.childNodes.length; i++) {
        var child = ele.childNodes[i];
        if(child.id == id || (child = hasId(child, id))){
           return child;
        }
    }
    return false;
}

edited May 25, 2012 at 23:30

answered May 25, 2012 at 23:15

Willem D'Haeseleer

20.3k10 gold badges69 silver badges104 bronze badges

1 Comment

Pierre Over a year ago

This doesn't work. If the recurring call does not return any element, your function still returns, when it needs to continue iterating through elements.

Collectives™ on Stack Overflow

JavaScript + recursive function returning undefined

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related