我有六个单选按钮组，我正在尝试验证每个组以确定是否已进行选择。最后一个广播组将不会被验证。由于某种原因，循环停在数组中的第5个元素。唯一的错误是此问题标题中列出的错误。我不知道如何进一步排除故障，从而解决问题。任何建议都将不胜感激。
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>.floatLeft {float: left; clear: left;} </style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<table id="optionTable">
<tr>
<td>
<input type="radio" id="P3Green3panel1Green" class="floatLeft pbIgnoredInput" name="panel1Green" value="P3Green3" >
<input type="radio" id="P3Green2panel1Green" class="floatLeft pbIgnoredInput" name="panel1Green" value="P3Green2" >
<input type="radio" id="P3Green5panel1Green" class="floatLeft pbIgnoredInput" name="panel1Green" value="P3Green5" >
<input type="radio" id="P3Green1Apanel1Green" class="floatLeft pbIgnoredInput" name="panel1Green" value="P3Green1A" >
<input type="radio" id="P3Green4panel1Green" class="floatLeft pbIgnoredInput" name="panel1Green" value="P3Green4" >
</td>
<td>
<input type="radio" id="P3Yellow3panel1Yellow" class="floatLeft pbIgnoredInput" name="panel1Yellow" value="P3Yellow3" >
<input type="radio" id="P3Yellow1Apanel1Yellow" class="floatLeft pbIgnoredInput" name="panel1Yellow" value="P3Yellow1A" >
<input type="radio" id="P3Yellow4panel1Yellow" class="floatLeft pbIgnoredInput" name="panel1Yellow" value="P3Yellow4" >
<input type="radio" id="P3Yellow5panel1Yellow" class="floatLeft pbIgnoredInput" name="panel1Yellow" value="P3Yellow5" >
<input type="radio" id="P3Yellow2panel1Yellow" class="floatLeft pbIgnoredInput" name="panel1Yellow" value="P3Yellow2" >
</td>
<td>
<input type="radio" id="P3Black2panel1Black" class="floatLeft pbIgnoredInput" name="panel1Black" value="P3Black2" >
<input type="radio" id="P3Black1Apanel1Black" class="floatLeft pbIgnoredInput" name="panel1Black" value="P3Black1A" >
<input type="radio" id="P3Black4panel1Black" class="floatLeft pbIgnoredInput" name="panel1Black" value="P3Black4" >
<input type="radio" id="P3Black3panel1Black" class="floatLeft pbIgnoredInput" name="panel1Black" value="P3Black3" >
<input type="radio" id="P3Black5panel1Black" class="floatLeft pbIgnoredInput" name="panel1Black" value="P3Black5" >
</td>
<td>
<input type="radio" id="P3Red4panel1Red" class="floatLeft pbIgnoredInput" name="panel1Red" value="P3Red4" >
<input type="radio" id="P3Red2panel1Red" class="floatLeft pbIgnoredInput" name="panel1Red" value="P3Red2" >
<input type="radio" id="P3Red5panel1Red" class="floatLeft pbIgnoredInput" name="panel1Red" value="P3Red5" >
<input type="radio" id="P3Red3panel1Red" class="floatLeft pbIgnoredInput" name="panel1Red" value="P3Red3" >
<input type="radio" id="P3Red1Apanel1Red" class="floatLeft pbIgnoredInput" name="panel1Red" value="P3Red1A" >
</td>
<td>
<input type="radio" id="P3Blue5panel1Blue" class="floatLeft pbIgnoredInput" name="panel1Blue" value="P3Blue5" >
<input type="radio" id="P3Blue2panel1Blue" class="floatLeft pbIgnoredInput" name="panel1Blue" value="P3Blue2" >
<input type="radio" id="P3Blue1Apanel1Blue" class="floatLeft pbIgnoredInput" name="panel1Blue" value="P3Blue1A" >
<input type="radio" id="P3Blue3panel1Blue" class="floatLeft pbIgnoredInput" name="panel1Blue" value="P3Blue3" >
<input type="radio" id="P3Blue4panel1Blue" class="floatLeft pbIgnoredInput" name="panel1Blue" value="P3Blue4" >
</td>
<td>
<input type="radio" id="P3Brown1Apanel1Brown" class="floatLeft pbIgnoredInput" name="panel1Brown" value="P3Brown1A">
<input type="radio" id="P3Brown3panel1Brown" class="floatLeft pbIgnoredInput" name="panel1Brown" value="P3Brown3" >
<input type="radio" id="P3Brown2panel1Brown" class="floatLeft pbIgnoredInput" name="panel1Brown" value="P3Brown2" >
<input type="radio" id="P3Brown5panel1Brown" class="floatLeft pbIgnoredInput" name="panel1Brown" value="P3Brown5" >
<input type="radio" id="P3Brown4panel1Brown" class="floatLeft pbIgnoredInput" name="panel1Brown" value="P3Brown4" >
</td>
</tr>
<tr>
<td align="center" class="confirm" colspan="6">
<button type="button" onclick="verifySubmission();">Confirm</button>
</td>
</tr>
</table>
</body>
</html>
和脚本：
function verifySubmission() {
var parentTable = document.getElementById("optionTable");
var tdNodeList = parentTable.getElementsByTagName("input");
var howManyTDS = tdNodeList.length;
alert("The number of input elements are " + howManyTDS);
var myInputArray = [];
for (var j = 0; j < howManyTDS; j++) {
myInputArray[j] = tdNodeList[j].getAttribute("name"); //This loop gets the value for the "name" attribute for each input element
}
//This determines the unique "name" values in the array of input elements
Array.prototype.contains = function(v) {
for (var i = 0; i < this.length; i++) {
if (this[i] === v) return true;
}
return false;
};
Array.prototype.unique = function() {
var arr = [];
for (var m = 0; m < this.length; m++) {
if (!arr.contains(this[m])) {
arr.push(this[m]);
}
}
return arr;
};
var uniques = myInputArray.unique();
alert("The number of radio groups " + uniques.length);
alert("These are the radio group names: " + uniques.toString());
var missingPencilSelection = [];
var uniqueInputNameElements = []; //This empty array will hold the list of "input" elements with a specific "name"
for (var l = 0; l < uniques.length; l++) {
uniqueInputNameElements = document.getElementsByName(uniques[l]);
validateRadios(uniqueInputNameElements[l].name);
}
function validateRadios(pencilName) {
var radios = document.getElementsByName(pencilName);
for (k = 0; k < radios.length; k++) {
if (radios[k].checked) {
return;
}
}
alert ("This pencil is not checked: " + pencilName);
missingPencilSelection.push(pencilName);
alert("Current count of missing pencil selections: " + missingPencilSelection.length);
return;
}
return;
}
答案 0 :(得分：0)
我并不完全了解您使用代码的位置，但错误是由一些奇怪且冗余的变量处理引起的。
将for(var l = 0;...的循环更改为：
for (var l = 0; l < uniques.length; l++) {
validateRadios(uniques[l]);
}
您按名称获取元素，然后将元素的名称传递给函数。这简化了它，因此您只需传入名称。
答案 1 :(得分：0)
问题在于以下代码：
for (var l = 0; l < uniques.length; l++) {
uniqueInputNameElements = document.getElementsByName(uniques[l]);
validateRadios(uniqueInputNameElements[l].name);
}
当此循环运行时，uniques.length为6。
uniqueInputNameElements将包含5个elemet，因为每个组中只有5个元素。
因此，在最后一次迭代中，l的值将为5。
uniqueInputNameElements[5].name会抛出错误。第5个元素将位于uniqueInputNameElements[4]，因为索引是基于零的。