JavaScript recursion does not work correctly

Could anyone say why the following recursive function does not work for me ? It should collect recursively all radio buttons in a given element. But, it does not found any for some reason !?

Thanks !!

<?xml version="1.0" encoding="Windows-1255"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript">
        function AllInputs(radioElement) {
            this.radioInputs = ((arguments.length == 1) ? [radioElement] : []);
        }

        AllInputs.prototype.toString = function() {
            return "[object AllInputs: radioInputs: " + this.radioInputs.length + "]";
        }

        AllInputs.prototype.add = function(otherAllInputs) {
            this.radioInputs = this.radioInputs.concat(otherAllInputs.radioInputs);
        }

        function getAllInputsOfElement(element) {
            if (element.tagName.toLowerCase() == "input") {
                if (element.getAttribute("type").toLowerCase() == "radio") {
                    return new AllInputs(element);
                } else {
                    return new AllInputs();
                }
            } else {
                var result = new AllInputs();

                for (i = 0; i < element.children.length; i++) {
                    result.add(getAllInputsOfElement(element.children[i]));
                }

                return result;
            }
        }

        function main() {
            alert(getAllInputsOfElement(document.getElementById("MyTable")));
        }
    </script>
</head>

<body onload="main()">
    <table id="MyTable">
        <tr><td>Day</td></tr>

        <tr><td>
            <input type="radio" name="DayOfTheWeek" value="1" /><label>Monday</label>
            <input type="radio" name="DayOfTheWeek" value="2" /><label>Tuesday</label>
            <input type="radio" name="DayOfTheWeek" value="3" /><label>Wednesday</label>
        </td></tr>
    </table>
</body>
</html>


Try this

<?xml version="1.0" encoding="Windows-1255"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript">
        function AllInputs(radioElement) {
            this.radioInputs = ((arguments.length == 1) ? [radioElement] : []);
        }

        AllInputs.prototype.toString = function() {
            return "[object AllInputs: radioInputs: " + this.radioInputs.length + "]";
        }

        AllInputs.prototype.add = function(otherAllInputs) {
            this.radioInputs = this.radioInputs.concat(otherAllInputs.radioInputs);
        }

        function getAllInputsOfElement(element) {
            if (element.tagName.toLowerCase() == "input") {
                if (element.getAttribute("type").toLowerCase() == "radio") {
                    return new AllInputs(element);
                } else {
                    return new AllInputs();
                }
            } else {
                var result = new AllInputs();
                var noOfChildren = element.children.length;
                for (var i = 0; i < noOfChildren; i++) {
                    result.add(getAllInputsOfElement(element.children[i]));
                }

                return result;
            }
        }

        function main() {
            alert(getAllInputsOfElement(document.getElementById("MyTable")));
        }
    </script>
</head>

<body onload="main()">
    <table id="MyTable">
        <tr><td>Day</td></tr>

        <tr><td>
            <input type="radio" name="DayOfTheWeek" value="1" /><label>Monday</label>
            <input type="radio" name="DayOfTheWeek" value="2" /><label>Tuesday</label>
            <input type="radio" name="DayOfTheWeek" value="3" /><label>Wednesday</label>
        </td></tr>
    </table>
</body>
</html>

I'm not checking what you are trying to solve. I just checked the issue you are having.

It is because of the scope of the iterating variable i in getAllInputsOfElement().

The variable i not declared as local to the method, it is available in the global scope. So just declare the variable as local using var keyword.

Try to use firefug for any other debugging tools to check the javascript execution to fix this kind of issues.

Try to put some logging messages to find out actual execution path and analyse it to find the issues with the code execution

Hope this solves your problem