Uncaught TypeError: Не удается прочитать свойство «name» undefined

У меня есть шесть групп переключателей, и я пытаюсь проверить каждую группу, чтобы определить, был ли выделен выбор. Последняя группа радиостанций не будет проверена. По какой-то причине, цикл останавливается на 5-м элементе массива.При единственной ошибке является тот, который указан в заголовке этого вопроса.Я не понимаю, как продолжить устранение неполадок и, таким образом, решить.Каждый совет будет очень признателен.Uncaught TypeError: Не удается прочитать свойство «name» undefined

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

}

источник

2014-08-20 Quint Rahaman

'Array.prototype.contains'? Почему бы просто не использовать 'indexOf'? Пример: 'var arr = [" cool "," hot "]; arr.indexOf ("hot") // возвращает 1' – tymeJV

@tymeJV Реализация 'contains' обеспечивает более понятное и понятное значение. Зачем получать индекс, когда вам все равно? – Ian

Ваш 'HTML' содержит несколько элементов с одинаковым идентификатором' id', который является недопустимым ... –

Я не совсем понимаю, где вы 'происходит с кодом, но ошибка вызвана некоторой странной и избыточной обработкой переменных.

Изменение цикла с for(var l = 0;... на:

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

Вы получали элементы по имени, затем передавая имя элемента к функции. Это упрощает его, поэтому вы просто передаете имя.

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

источник

2014-08-20 17:59:35 tcooc

Спасибо. Когда я делаю предлагаемое изменение, предупреждение в функции validateRadios показывает: этот карандаш не установлен: [object NodeList]. В оригинале были переданы имена каждой радиогруппы. Я думаю, ваше предложенное изменение передает список узлов функции validateRadios. Я новичок в js. Я предполагаю, что есть способ изменить функцию validateRadios для обработки нодлиста? –

@QuintRahaman Сделано типографское копирование решения. Я отредактировал свой ответ с правильным кодом и скрипкой, показывающей, как это работает. – tcooc

спасибо! Это одно изменение сделало трюк. Ясно, что я все еще нечеткие объекты, массивы и т. Д. Еще раз спасибо за ваш быстрый ответ. –

Проблема заключается в следующем коде:

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 будет вызывать ошибку, поскольку такого элемента нет. Пятый элемент будет равен uniqueInputNameElements[4], так как индексирование основано на нуле.

источник

2014-08-20 18:19:37

Спасибо за ваш ответ. Я считаю, что вы правы в своем анализе. Ответ tcooc сработал. Еще раз спасибо. –

Uncaught TypeError: Не удается прочитать свойство «name» undefined

ответ

Смежные вопросы