JavaScript recursion does not work properly
Could anyone say why the following recursive functio开发者_JAVA技巧n 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
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.
加载中,请稍侯......
精彩评论