Question

我有六个单选按钮组，我正在尝试验证每个组以确定是否已进行选择。最后一个广播组将不会被验证。由于某种原因，循环停在数组中的第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;

}

Answer 1

我并不完全了解您使用代码的位置，但错误是由一些奇怪且冗余的变量处理引起的。

将for(var l = 0;...的循环更改为：

for (var l = 0; l < uniques.length; l++) {
    validateRadios(uniques[l]);
}

您按名称获取元素，然后将元素的名称传递给函数。这简化了它，因此您只需传入名称。

小提琴：http://jsfiddle.net/t1cfLr83/

Answer 2

问题在于以下代码：

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]，因为索引是基于零的。

未捕获的TypeError：无法读取属性＆＃34; name＆＃39;未定义的

2 个答案: