JavaScript recursion does not work properly

问题

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>

回答1:

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

回答2:

You've got a very complicated solution to a problem that is easily handled with DOM methods. Try this instead:

<?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 main() {
            var inputs = document.getElementById("MyTable").getElementsByTagName("input");
            var radios = [];

            for(var i=0; i<inputs.length; i++) {
                if (inputs[i].type == "radio") {
                    radios.push(inputs[i]);
                }
            }
            alert("Found " + radios.length + " radio buttons");
        }
    </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>
            <input type="button" value="Nope" />
        </td></tr>
    </table>
</body>
</html>

It could be simplified even more with jQuery.

来源：https://stackoverflow.com/questions/2626773/javascript-recursion-does-not-work-properly

标签

javascript

html

recursion