未捕获的类型错误:无法读取属性"name'的定义

Uncaught TypeError: Cannot read property "name' of undefined

本文关键字：quot 属性 name 定义 读取 类型 错误      更新时间：2023-09-26

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

我不完全明白你的代码在哪里，但是这个错误是由一些奇怪的和冗余的变量处理引起的。

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

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

您通过名称获取元素，然后将元素的名称传递给函数。这样就简化了，只需传入名称即可。

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

问题在于以下代码:

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

当此循环运行时，uniques.length为6。

uniqueInputNameElements将包含5个元素，因为每组只有5个元素。

所以在最后一次迭代中，l的值将是5。

uniqueInputNameElements[5].name将抛出错误，因为没有这样的元素。第5个元素将位于uniqueInputNameElements[4]，因为索引是从0开始的。

相关文章：