For loop in javascript missing a value

Question

I am new to javascript and am learning arrays and loops. I was writing some basic code to change classes of some paragraphs, but am unable to do so. Can anyone tell me what am I doing wrong in it?

function change() {
  var x = document.getElementsByClassName('a');
  x[0].className = 'b';
  for (var y = 0; y < x.length; y++) {
    console.log(x[y]);
    x[y].className = "b";
  }
}

p.a {
  font-size: 2em;
  color: red;
  text-align: center;
}

p.b {
  font-size: 1em;
  color: green;
  text-align: center;
}

<p class='a'>a</p>
<p class='a'> b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>

<button onclick="change()">Change</button>

As it turns out some paragraphs are changing and some are not can anyone tell what am I doing wrong?

Well, which ones are not changing? Do they have anything in common at the time? — user2864740
– user2864740, Commented Oct 26, 2019 at 20:58
getElementsByClassName() returns a live node collection. Since as you change the classes, those elements are removed from the collection. — canon
– canon, Commented Oct 26, 2019 at 21:04

Mark · Accepted Answer · 2019-10-26 21:03:52Z

3

document.getElementsByClassName() is a live collection which means as you loop through the elements and change the class you are changing the collection. It's almost always a bad idea to alter the membership of a collection while you iterate over it. This makes your indexes point to the wrong elements. The easiest solution is to use querySelectorAll() instead.

function change() {
  var x = document.querySelectorAll('.a');
  for (var y = 0; y < x.length; y++) {
    x[y].className = "b";
  }
}

p.a {
  font-size: 2em;
  color: red;
  text-align: center;
}

p.b {
  font-size: 1em;
  color: green;
  text-align: center;
}

<p class='a'>a</p>
<p class='a'> b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>

<button onclick="change()">Change</button>

answered Oct 26, 2019 at 21:03

Mark

92.6k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ggorlen Over a year ago

Can also use [...x] to convert the collection to a plain old array. Variable names could also be clearer.

Deekshant Over a year ago

as getELementByClassName is a live collection, shouldn't my code work if i change - x[y].className = "b"; by x[0].className = "b"; so that no matter how many times the collection change always the 1st element in the array will change? But still it doesnt change all the elements?

Mark Over a year ago

No, it doesn’t change them all @DeekshantWadhwa. But notice that it doesn’t skip any. As you change them, the length of of x decreases so you never make it all the way through. Try capturing the length of x outside the loop and try again.

Collectives™ on Stack Overflow

For loop in javascript missing a value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related