Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Recursion

Javascript Recursion Does Not Work Properly

Post a Comment
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

Solution 1:

Try this 

<?xml version="1.0" encoding="Windows-1255"?><!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><scripttype="text/javascript">functionAllInputs(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);
        }

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

                return result;
            }
        }

        functionmain() {
            alert(getAllInputsOfElement(document.getElementById("MyTable")));
        }
    </script></head><bodyonload="main()"><tableid="MyTable"><tr><td>Day</td></tr><tr><td><inputtype="radio"name="DayOfTheWeek"value="1" /><label>Monday</label><inputtype="radio"name="DayOfTheWeek"value="2" /><label>Tuesday</label><inputtype="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

Solution 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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><scripttype="text/javascript">functionmain() {
            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><bodyonload="main()"><tableid="MyTable"><tr><td>Day</td></tr><tr><td><inputtype="radio"name="DayOfTheWeek"value="1" /><label>Monday</label><inputtype="radio"name="DayOfTheWeek"value="2" /><label>Tuesday</label><inputtype="radio"name="DayOfTheWeek"value="3" /><label>Wednesday</label><inputtype="button"value="Nope" /></td></tr></table></body></html>

It could be simplified even more with jQuery.

Post a Comment for "Javascript Recursion Does Not Work Properly"