TypeError: radioButton[i] is undefined

Question

I have a simple JS code which needs to get the IDs from each radio button input, and then create labels with the same IDs for each radio button. The code works, but I am getting an error message as written in the title. How to get rid of it?

And I saw there's already a similar question but it didn't solve my problem at all.

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>

Remove `=` from the `for` loop condition, you're looping past the last index of the collection. — Teemu, Mar 20 '20 at 11:16
@Teemu Thank you so much! Exactly that caused this error. Now it works! — Katarina Perović, Mar 20 '20 at 11:24

T.J. Crowder · Accepted Answer · 2020-03-20T11:32:26.180

There are two issues I can see:

getElementsByTagName returns a live collection. If you change the DOM in ways that affect the elements (for instance, by moving them), that change is reflected in the collection.

If you don't want that, get a NodeList from querySelectorAll instead (document.querySelectorAll("input"); NodeLists are snapshots, not live collections. Or since you're using jQuery, use a jQuery set ($("input")). They're also snapshots.

That said, looking more closely at your code, I don't think you're doing anything that would affect the collection.
You're using <= radioButton.length instead of just < radioButton.length. You should go 0 through < radioButton.length. If you use a jQuery set, you can use its each method instead. If you use the NodeList from querySelectorAll, in modern environments (or if you polyfill it), you can use its forEach method.

Thanks to everyone who answered! That character caused the error, now everything works perfectly and I understand my mistake! All three answers are the same, I don't know which one to accept. If I could, I would accept them all! — Katarina Perović, Mar 20 '20 at 11:29

brk · Answer 2 · 2020-03-20T11:30:31.347

i <= radioButton.length will try to access the non existent element. Iterate till the length is less than the length of the collection

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

Alternatively you can use spread syntax to convert the collection to array and use arrray operator and template literal for a cleaner code

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

Thanks to everyone who answered! That character caused the error, now everything works perfectly and I understand my mistake! All three answers are the same, I don't know which one to accept. If I could, I would accept them all! — Katarina Perović, Mar 20 '20 at 11:29

score 1 · Answer 3 · answered Mar 20 '20 at 11:19

1

You have a minor mistake in your code.

If the flag i starts with 0 then it should be less than it's the length.

You are trying to access an additional element that does not exist in DOM.

Please replace your line -

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

With

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

OR

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

answered Mar 20 '20 at 11:19

Alok Mali

2,821
2
16
32

1

Thanks to everyone who answered! That character caused the error, now everything works perfectly and I understand my mistake! All three answers are the same, I don't know which one to accept. If I could, I would accept them all! – Katarina Perović Mar 20 '20 at 11:29

TypeError: radioButton[i] is undefined

3 Answers3