javascript - 类型错误 : radioButton[i] is undefined

Question

我有一个简单的 JS 代码，需要从每个单选按钮输入中获取 ID，然后为每个单选按钮创建具有相同 ID 的标签。该代码有效，但我收到标题中所写的错误消息。如何摆脱它？

我看到已经有一个类似的问题，但它根本没有解决我的问题。

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>

Answer 1

我发现有两个问题:

1. getElementsByTagName返回一个实时集合。如果您以影响元素的方式更改 DOM(例如，通过移动元素)，则该更改将反射(reflect)在集合中。

   如果您不想这样，请获取 NodeList来自querySelectorAll相反 ( document.querySelectorAll("input") ; NodeList 是快照，而不是实时集合。或者因为您使用的是 jQuery，所以使用 jQuery 集 ( $("input") )。它们也是快照。

   也就是说，更仔细地查看您的代码，我认为您没有做任何会影响集合的事情。

2. 您正在使用<= radioButton.length而不仅仅是< radioButton.length 。你应该去0通过< radioButton.length 。如果使用jQuery集，可以使用其each方法代替。如果您使用NodeList来自querySelectorAll ，在现代环境中(或者如果您 polyfill it )，您可以使用它的 forEach方法。