className only changing every other class

Question

I'm performing a small text with JavaScript with the getElementsByClassName() and I am getting some unwanted results. I would like the script to change each CSS class to a new class. The issue is that every other class is only changing...

I would like to use pure js how this issue as it is for practice purposes.

The first thing that came to mind was white spaces, although when removing the this did not make any differnce.

Can anyone point our what I am doing wrong?

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="default.css">
    </head>
    <body>
        <div class="block-default">BLOCK1</div>
        <div class="block-default">BLOCK2</div>
        <div class="block-default">BLOCK3</div>
        <div class="block-default">BLOCK4</div>
        <div class="block-default">BLOCK5</div>
        <div class="block-default">BLOCK6</div>
        <div class="block-default">BLOCK7</div>
        <div class="block-default">BLOCK8</div>
        <script>

    var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;

    blockSet[0].className = "block-selected";
    blockSet[1].className = "block-selected";
    blockSet[2].className = "block-selected";
    blockSet[3].className = "block-selected";
    blockSet[4].className = "block-selected";
    blockSet[5].className = "block-selected";
    blockSet[6].className = "block-selected";
    blockSet[7].className = "block-selected";   

        </script>
    </body>
</html>

CSS Classes:

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

If you want to keep your code, you could just descend it instead of ascend it. Start with blockSet[7] and go down to blockSet[0] — Lain, Jun 14 '15 at 10:05
This is actually an exact duplicate question of http://stackoverflow.com/questions/16510973/how-can-i-replace-one-class-with-another-on-all-elements-using-just-the-dom — Drakes, Jun 16 '15 at 10:13
Can you please explain in brief like when you want to change class and which element class will be change. like if you want to change the class on click event ? — Mitul, Jun 16 '15 at 12:07
This is a duplicate of many questions: [1](http://stackoverflow.com/q/16335527/3150271), [2](http://stackoverflow.com/q/16777885/3150271), [3](http://stackoverflow.com/q/16510973/3150271), [4](http://stackoverflow.com/q/5187918/3150271), [5](http://stackoverflow.com/q/26479289/3150271). Did you research your question before asking? — Anonymous, Jun 18 '15 at 15:06

adricadar · Answer 1 · 2015-06-18T09:29:25.623

Because you change the .className of the blockSet which is an HTMLCollection. The collection that have elements with same class (block-default) will change when the elements suffers some updates.

In other words when you change the .className of an element the collection will exclude that element. This means that the size of the HTMLCollection will decrease . Also the size will increase if an element with that class has beed added to the DOM.

To solve this you can always change only the first element .className.

for(var i = 0; i<blockSetLength; i++)
{
    blockSet[0].className = "block-selected";
}

Notes: Intead of changing class element by element, you can iterate through elements with for and change .className.

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

console.log(blockSet);

for(var i = 0; i<blockSetLength; i++)
{
    blockSet[0].className = "block-selected";
}

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

If you add a new item in DOM (not collection) the size will increase as presented in the example below.

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

alert("Current size: " + blockSet.length);
document.body.innerHTML += '<div class="block-default">BLOCK9</div>';
alert("After adding an element in DOM size: " + blockSet.length);

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

Rick Hitchcock · Answer 2 · 2015-06-15T19:01:39.303

Instead of using getElementsByClassName(),
which returns a live HTMLCollection that will change as the classNames change,
you can use querySelectorAll(),
which returns a non-live NodeList that will not change.

querySelectorAll() has better IE support than getElementsByClassName() (IE8+ vs. IE9+).
It's also much more flexible since it supports CSS selectors (CSS2 for IE8+ and CSS3 for IE9+).

However, querySelectorAll() is slower than getElementsByClassName().
Keep that in mind if you're processing thousands of DOM elements.

Snippet

var blockSet = document.querySelectorAll(".block-default");
var blockSetLength = blockSet.length;

blockSet[0].className = "block-selected";
blockSet[1].className = "block-selected";
blockSet[2].className = "block-selected";
blockSet[3].className = "block-selected";
blockSet[4].className = "block-selected";
blockSet[5].className = "block-selected";
blockSet[6].className = "block-selected";
blockSet[7].className = "block-selected";

.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

This is probably the safest method. All other solutions recommend setting the first item in a live collection, which can still be problematic in very specific cases. — light, Jun 13 '15 at 02:45
If you don't want to use `querySelectorAll` for whatever reason, or just want an alternate solution, you can use `Array.from(liveNodeList)` or `[].slice.call(liveNodeList)` to convert the `liveNodeList` into a static mutable array. — user3459110, Jun 13 '15 at 09:13

score 6 · Answer 3 · answered Apr 12 '15 at 09:23

By assigning a value to .className you overwrite every class on that element. What you might want to take a look at is the .classList attribute.

Remove a class:

blockSet[0].classList.remove('block-default');

Add the new class:

blockSet[0].classList.add('block-selected');

A good point to start with, when your trying to do stuff, jQuery usually did for you, is http://youmightnotneedjquery.com/

vals · Answer 4 · 2015-06-13T08:47:44.787

5

You have already some good solutions.

I think that the best one is the one from Rick Hitchcock.

But a solution that I often use, to be safe when doing things like that, is to travel the collection backwards

var nmax = blockSet.length - 1;
for (var n=nmax; n>=0; n--) {
    blockSet[n].className = 'block-selected';
}

That isolates you from changes in the collection

edited Jun 13 '15 at 08:47

answered Jun 13 '15 at 07:57

vals

61,425
11
89
138

this is the best solution; the point is that working with `getElementsByClassName` you're interacting with a live data structure that will update immediately ... looping backwards won't influence your indexes. – maioman Jun 16 '15 at 13:42

Jan Turoň · Answer 5 · 2015-04-12T09:28:51.377

3

document.getElementsByClassName returns a HTMLCollection object, which is live

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

So when you call

blockSet[0].className = "block-selected";

You changed the underlying document and that item is not in the collection anymore (the blockSet[0] is now the second item in your original selection).

edited Apr 12 '15 at 09:28

answered Apr 12 '15 at 09:25

Jan Turoň

31,451
23
125
169

1

Use `var blockSet = Array.slice.call (document.getElementsByClassName("block-default"));` to make the HTML collection into a regular array. – HBP Apr 12 '15 at 09:28
Exactly. It is worth to mention that jQuery works with Arrays, not HTMLCollection when called `$(".block-default")`, so you can't achieve this behavior with that library. – Jan Turoň Apr 12 '15 at 09:35

score 2 · Answer 6 · answered Jun 12 '15 at 23:05

This error occurs because blockSet is an HTMLCollection, which is "live." HTMLCollections update as the elements on the page update.

Every time you swap a className, you're making blockSet shorter one by one.

To solve this problem, just do this instead:

for (var i = 0; i < 8; i += 1) {
    blockSet[ 0 ].className = "block-selected";
}

That way you chunk your HTMLCollection off one by one.

Iteration 1: [ div1, div2, div3, div4, div5, div6, div7, div8 ]

Iteration 2: [ div2, div3, div4, div5, div6, div7, div8 ]

Iteration 3: [ div3, div4, div5, div6, div7, div8 ]

Iteration 4: [ div4, div5, div6, div7, div8 ]

Iteration 5: [ div5, div6, div7, div8 ]

Iteration 6: [ div6, div7, div8 ]

Iteration 7: [ div7, div8 ]

Iteration 8: [ div8 ]

Hope that helps!

score 2 · Answer 7 · edited Jun 15 '15 at 16:48

2

The simplest way you can do this is by using the below code:

while(blockSetLength--){ 
    //this will change the class of n-1 dom object 
    blockSet[blockSetLength].className='block-selected';
}

edited Jun 15 '15 at 16:48

jmarkmurphy

11,030
31
59

answered Jun 15 '15 at 16:07

Maverick

131
1
4

score 1 · Answer 8 · answered Apr 12 '15 at 09:18

This worked for me

var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

<div class ="block-default">BLOCK1</div>
<div class ="block-default">BLOCK2</div>
<div class ="block-default">BLOCK3</div>
<div class ="block-default">BLOCK4</div>
<div class ="block-default">BLOCK5</div>
<div class ="block-default">BLOCK6</div>
<div class ="block-default">BLOCK7</div>
<div class ="block-default">BLOCK8</div>

Guys, thank you for clearing that up for me! So as the process was live, pin pointing the first item in the array would change the whole section based on the length! Cheers guys - Ryan — EvilGenius82, Apr 13 '15 at 09:37

score 0 · Answer 9 · answered Jun 12 '15 at 21:14

0

This error is because you need to do

blockSet[0].className = 'block-selected'

You don't to write blockSet[1] , blockSet[2] ...

You can do:

for (var s=0;s<blockSetLength;s++) {
  blockSet[0].className = 'block-selected';
}

answered Jun 12 '15 at 21:14

OBezzad

145
1
9

What you brind different from the current answers? – adricadar Jun 14 '15 at 06:47

score 0 · Answer 10 · answered Jun 12 '15 at 21:35

Your error occur because .className return a live HTMLCollection. So when you do something like this:

blockSet[0].className = "block-selected";

Your collection blockSet[0] will become the blockSet[1]. So when you execute the line :

blockSet[1].className = "block-selected";

You not change the blockSet[1] you think but you change the starting blockSet[2].

So you can do this:

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
for(var i=0;i<blockSetLength;i++){
    blockSet[0].classList.add('block-selected'); //add the new class first
    blockSet[0].classList.remove('block-default'); //delete the old one
}

http://jsfiddle.net/94dqffa7/

I think it's the best way to do it. Because the classList.add() and classList.remove() will help you to change your class without eleminate the others class you have on your div (if you have some). Also, you need to add the new one before remove the old one or you will have the same problem as before.

score 0 · Answer 11 · answered Jun 13 '15 at 20:42

function change() {
  var blockSet = document.getElementsByClassName("block-default");
  var blockSetLength = blockSet.length;

  for (var i = 0; i < blockSetLength; i++) {

    blockSet[0].className = "block-selected";
  }
}

.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}

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

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

what you were doing wrong is every time you change the class the colllection re-evaluates and decreases in size.

What you brind different from the current answers? – adricadar Jun 14 '15 at 06:47 — adricadar, Jun 14 '15 at 06:47

Arathi Sreekumar · Answer 12 · 2015-06-15T15:12:00.957

First, the below code should do the trick in the simplest way.

var blockSet = document.getElementsByClassName("block-default").className = "block-selected";

Next what goes wrong with your code, or rather what is the interesting thing that is happening:

blockSet[0].className = 'block-selected';

makes the first block set element no longer a block set element. That leaves you with 7 remaining. Now,

blockSet[1].className = 'block-selected';

Selects the second one of the remaining ones. Which would be the third one of your complete list. Now you have 6 remaining.

blockSet[2].className = 'block-selected';

This makes the third one among the remaining, which would be your BLOCK5 into a block selected. And results in you having 5 remaining.

blockSet[3].className = 'block-selected';

This again finds your fourth one which is BLOCK7 when you count to the fourth among your remaining. And now you have 4 remaining.

blockSet[4] onwards find no such element and fail to execute. This is what happens with your code. Quite interesting. :).

Here is a jsfiddle alerting you the values as they run: https://jsfiddle.net/xz7h57jv/

score 0 · Answer 13 · answered Jun 16 '15 at 09:57

Definition and Usage

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

The use of this property is discouraged because of performance implications (due to the live DOMCollection where any changes to the document must be reflected on the returned object immediately) and complexity (the removal of an element from the document will result in immediate changes to the collection).

And by just adding only blockSet[0].className = "block-selected"; and by clicking on the button it colord each div by each click so we need to click 8 times in order to color all the divs and see the live example below

function myFunction() {
  var blockSet = document.getElementsByClassName('block-default');

  blockSet[0].className = "block-selected";

}

.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}

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

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

And by adding only var blockSet = document.getElementsByClassName('block-default'); alert("Length are: " + blockSet.length + "\nFirst Item is: " + blockSet[0].childNodes[0].nodeValue); without the rest it will alert

Length are: 8
First Item is: block1

As in the below live example:

function myFunction() {
  var blockSet = document.getElementsByClassName('block-default');

  /*
      blockSet[0].className = "block-selected";
      blockSet[1].className = "block-selected";
      blockSet[2].className = "block-selected";
      blockSet[3].className = "block-selected";
      blockSet[4].className = "block-selected";
      blockSet[5].className = "block-selected";
      blockSet[6].className = "block-selected";
      blockSet[7].className = "block-selected";*/

  alert("Length are: " + blockSet.length + "\nFirst Item is: " + blockSet[0].childNodes[0].nodeValue);
}

.block-default {

  width: 100px;

  height: 50px;

  background-color: green;

  border: 1px solid red;

  padding: 10px;

}

.block-selected {

  width: 100px;

  height: 50px;

  background-color: blue;

  border: 1px solid white;

  padding: 10px;

}

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

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

Or we can use it use document.getElementsByClassNamewith for loopso a close alternative is querySelectorAll as Rick Hitchcock answered it.

function myFunction() {
  var blockSet = document.querySelectorAll('.block-default');
  blockSet[0].className = "block-selected";
  blockSet[1].className = "block-selected";
  blockSet[2].className = "block-selected";
  blockSet[3].className = "block-selected";
  blockSet[4].className = "block-selected";
  blockSet[5].className = "block-selected";
  blockSet[6].className = "block-selected";
  blockSet[7].className = "block-selected";
}

.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}

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

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

I hope my post it helps, let me know if you have any question.

score 0 · Answer 14 · answered Jul 28 '22 at 12:34

I came across an issue, where I wanted to identify HTML objects by the class and than change the class. However getElementsByClassName(string str) returned a live HTML nodeList, which also resulted in 50% loss, where the loop stopped to early.

My solution was simple and should work in all browsers. It also should be fast, since it does not use any exotic or complex logic.

So the solution was, to clone the list as an array and than loop over the array:

  let messagenodes = document.getElementsByClassName("WidgetAction Toggle");
  let messages = [];
  for (let i = 0; i < messagenodes.length; i++)
  {
    let self = messagenodes[i];
    messages.push(self);
  }
  
  for (let i = 0; i < messages.length; i++)
  {
    window.alert(messages.length);       // Debugging output to verify result
    window.alert(messages[i].innerHTML); // Debugging output to verify result
    messages[i].className = 'ToggleTicketMessageVisibility';
  }

score -1 · Answer 15 · answered Jun 16 '15 at 12:19

-1

You can find the working code over here

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>


var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for (i = 0; i < blockSetLength; i++) {
    blockSet[0].className = "block-selected";
}

Demo link http://jsfiddle.net/patelmit69/9koxfaLq/1/

answered Jun 16 '15 at 12:19

Mitul

3,431
2
22
35

What you bring new from other answers? – adricadar Jun 16 '15 at 15:51
This code contains a bug, it should be blockSet[i].className instead of blockSet[0].className. If it's intentional, then the for loop is unnecessary. – Karanvir Kang Jun 18 '15 at 03:34

score -1 · Answer 16 · answered Jun 17 '15 at 05:48

Use this to your javascript code. this will fix your error

<script>
    var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;

    for (var i = blockSet.length - 1; i >= 0; i--) {
        blockSet[i].className = "block-selected";
    };
</script>

className only changing every other class

16 Answers16

Linked

Related