Uncaught TypeError: Cannot read property "name' of undefined

Question

I have six radio button groups and I am trying to validate each group to determine if a selection has been made. The last radio group will not be validated. For some reason, the loop stops at the 5th element in the array. The only error is the one listed in this question's title. I am at a loss as to how to further troubleshoot and thus, solve. Any advice would be much appreciated.

    <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>

and the script:

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;

}

`Array.prototype.contains`? Why not just use `indexOf`? Example: `var arr = ["cool", "hot"]; arr.indexOf("hot") //returns 1` — tymeJV, Aug 20 '14 at 17:55
@tymeJV The implementation of `contains` provides a more readable and understandable meaning. Why get the index when you don't care? — Ian, Aug 20 '14 at 17:57
Your `HTML` contains multiple elements with same `id` which is invalid... — T J, Aug 20 '14 at 17:59
@Ian - I suppose...Although I don't see much point in adding a function when you could just do `var exists = arr.indexOf("hot") > -1` — tymeJV, Aug 20 '14 at 18:01

tcooc · Accepted Answer · 2014-08-20T18:33:17.930

0

I don't fully understand where you're going with the code, but the error is caused by some strange and redundant variable handling.

Change your loop with for(var l = 0;... to:

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

You were getting elements by name, then passing in the name of the element to the function. This simplifies it so you just pass in the name.

Fiddle: http://jsfiddle.net/t1cfLr83/

edited Aug 20 '14 at 18:33

answered Aug 20 '14 at 17:59

tcooc

20,629
3
39
57

Thanks. When I make the suggested change, the alert in the validateRadios function shows: This pencil is not checked: [object NodeList]. In the original, the names of each radio group was passed. I think your suggested change passes the list of nodes to the validateRadios function. I am new to js. I assume that there's a a way to modify the validateRadios function to handle the nodelist? – Quint Rahaman Aug 20 '14 at 18:29
@QuintRahaman Made a typo copying the solution. I edited my answer with the correct code and a fiddle showing how it works. – tcooc Aug 20 '14 at 18:35
thank you! That one change did the trick. Clearly I'm still fuzzy objects, arrays, etc. Thanks again for your speedy response. – Quint Rahaman Aug 20 '14 at 18:42

score 0 · Answer 2 · answered Aug 20 '14 at 18:19

The issue is with the following code:

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

When this loop runs, uniques.length is 6.

uniqueInputNameElements will contain 5 elemetns since there are only 5 elements in each group.

So in the final iteration, the value of l will be 5.

uniqueInputNameElements[5].name will throw error since there is no such element. The 5th element will be at uniqueInputNameElements[4] since the indexing is zero based.

thanks for your response. I believe you are correct in your analysis. tcooc's answer has worked. Thanks again. — Quint Rahaman, Aug 20 '14 at 18:43

Uncaught TypeError: Cannot read property "name' of undefined

2 Answers2

Linked