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

我可以看到两个问题：

getElementsByTagNamereturns一场直播collection。如果您以影响元素的方式更改 DOM（例如，通过移动它们），该更改将反映在 collection.
中
如果您不想要，请从 querySelectorAll 获取 NodeList（document.querySelectorAll("input")；NodeLists 是快照，不是实时的 collection s. 或者由于您使用的是 jQuery，请使用 jQuery 集合 ($("input"))。它们也是快照。

也就是说，仔细查看您的代码，我认为您没有做任何会影响 collection.
您正在使用 <= radioButton.length 而不仅仅是 < radioButton.length。您应该从 0 到 < radioButton.length。如果您使用 jQuery 集，则可以改用其 each 方法。如果您使用 querySelectorAll 中的 NodeList，在现代环境中（或者如果您 polyfill it），您可以使用它的 forEach 方法。

Answer 2

您的代码中有一个小错误。

如果标志 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++)

Answer 3

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

TypeError: radioButton[i] is undefined

TypeError: radioButton[i] is undefined

javascript

jquery

undefined

undefined-behavior