JavaScript recursion does not work properly
Question
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>
2 answers
solution1
1 2010-04-13 03:45:32
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.
solution2
1 ACCPTED 2010-04-13 03:47:46
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.