Ошибка типа: radioButton [i] не определено - PullRequest
Новая
       103

Ошибка типа: radioButton [i] не определено

1 голос
/ 20 марта 2020

У меня есть простой код JS, который должен получить идентификаторы от каждого входа переключателя, а затем создать метки с одинаковыми идентификаторами для каждого переключателя. Код работает, но я получаю сообщение об ошибке, как написано в заголовке. Как от этого избавиться?

И я увидел, что уже есть подобный вопрос, но он не решил мою проблему вообще. 

function addLabels() {
  var radioButton = document.getElementsByTagName("input");

  for (var i = 0; i <= radioButton.length; i++) {
    var radioButtonId = radioButton[i].id;
    var label = "<label for='" + radioButtonId + "'></label>";
    $(label).insertAfter(radioButton[i]);
  }
}

addLabels();
<div class="slider-nav">
<input type="radio" name="slider-button" id="radio-button0">
<input type="radio" name="slider-button" id="radio-button1">
<input type="radio" name="slider-button" id="radio-button2">
</div>

Ответы [ 3 ]

3 голосов
/ 20 марта 2020

Я вижу две проблемы:

  1. getElementsByTagName возвращает коллекцию live . Если вы изменяете DOM таким образом, чтобы воздействовать на элементы (например, перемещая их), это изменение отражается в коллекции.

    Если вы этого не хотите, получите NodeList из querySelectorAll вместо этого (document.querySelectorAll("input"); NodeList s являются снимками, а не живыми коллекциями. Или поскольку вы используете jQuery, используйте набор jQuery ($("input")). Они также являются снимками.

    Тем не менее, если присмотреться более внимательно к вашему коду, я не думаю, что вы делаете что-то, что могло бы повлиять на коллекцию.

  2. Вы используете <= radioButton.length вместо просто < radioButton.length. Вам следует go 0 - < radioButton.length. Если вы используете набор jQuery, вы можете использовать вместо него метод each. Если вы используете NodeList из querySelectorAll, в современном окружения (или если вы заполнили его ), вы можете использовать его forEach метод.

2 голосов
/ 20 марта 2020

i <= radioButton.length попытается получить доступ к несуществующему элементу. Итерируйте, пока длина не станет меньше длины коллекции 

function addLabels() {
  var radioButton = document.getElementsByTagName("input");
  for (var i = 0; i < radioButton.length; i++) {
    var radioButtonId = radioButton[i].id;
    var label = "<label for='" + radioButtonId + "'>" + radioButtonId + "</label>";
    $(label).insertAfter(radioButton[i]);
  }
}

addLabels();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='checkbox' id='test1'>
<input type='checkbox' id='test2'>
<input type='checkbox' id='test3'>
<input type='checkbox' id='test4'>
<input type='checkbox' id='test5'>
<input type='checkbox' id='test6'>

В качестве альтернативы вы можете использовать синтаксис распространения для преобразования коллекции в массив и использовать оператор массива и литерал шаблона для более чистого кода 

function addLabels() {
  [...document.getElementsByTagName("input")].forEach((item) => {
    var radioButtonId = item.id;
    var label = `<label for=${radioButtonId}>${radioButtonId}</label>`;
    $(label).insertAfter(item);

  });

}

addLabels();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='checkbox' id='test1'>
<input type='checkbox' id='test2'>
<input type='checkbox' id='test3'>
<input type='checkbox' id='test4'>
<input type='checkbox' id='test5'>
<input type='checkbox' id='test6'>
1 голос
/ 20 марта 2020

В вашем коде есть небольшая ошибка.

Если флаг i начинается с 0, то он должен быть меньше его длины.

Вы пытаетесь получить доступ к дополнительному элемент, который не существует в DOM.

Пожалуйста, замените вашу строку - 

for (var i = 0; i <= radioButton.length; i++)

на 

for (var i = 0; i < radioButton.length; i++)

ИЛИ 

for (var i = 1; i <= radioButton.length; i++)
...