Struggling with classList.add and getElementsByClassName

Question

I'm trying to add a extra class to some elements with a specific class(input-fieldset).

<fieldset id="pay" class="input-fieldset"></fieldset>
<fieldset id="address" class="input-fieldset"></fieldset>

So I did some searches and found this:

var element = document.getElementsByClassName('input-fieldset');
element.classList.add(' input-fieldset-awesome');

I'm trying to add the class input-fieldset-awesome.

But it doesn't work, I get the error:

Uncaught TypeError: Cannot read property 'add' of undefined(anonymous function)

What am I doing wrong?

You are getting an array of elements from `getElementsByClassName`, try targeting only a particular element — Jon Snow, Jun 14 '14 at 12:08

James Hill · Accepted Answer · 2014-06-14T12:16:12.953

17

.getElementsByClassName() returns an HTMLCollection (array of objects) that must be iterated.

The code below will accomplish what you're after.

// Get desired elements
var element = document.getElementsByClassName('input-fieldset');

// Iterate through the retrieved elements and add the necessary class names.
for(var i = 0; i < element.length; i++)
{
    element[i].classList.add('input-fieldset-awesome');
    console.log(element[i].className);
}

Here's a working fiddle to play with.

edited Jun 14 '14 at 12:16

answered Jun 14 '14 at 12:10

James Hill

60,353
20
145
161

1

[`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element.classList), ([compatibility](http://caniuse.com/classlist)). – David Thomas Jun 14 '14 at 12:12
2

Classlist is a cleaner. better and relatively new way to add classes to elements. It doesn't involve manipulating the `className` string – Jon Snow Jun 14 '14 at 12:12
Thanks for the heads up guys. I modified my code to reflect your comments. – James Hill Jun 14 '14 at 12:13
Thank you very much, I'v been looking for it all day, finally you gave me the working code – Khalil May 13 '22 at 16:05
Is it the same code to remove class? – Khalil May 13 '22 at 16:44
@Khalil, yes, of course. – James Hill May 14 '22 at 13:32

score 2 · Answer 2 · edited Aug 17 '20 at 20:11

document.getElementsByClassName returns an array-like object of all child elements which have all of the given class names.

In your case you should modify your code like this.

var element = document.getElementsByClassName('input-fieldset')[0];
element.classList.add(' input-fieldset-awesome');

or

var elements = document.getElementsByClassName('input-fieldset');
for (var i = 0; i<elements.length; i++) {
   elements[i].classList.add('input-fieldset-awesome');
}

Ram · Answer 3 · 2014-06-14T12:15:32.187

1

getElementsByClassName returns a HTMLCollection which doesn't have classList property, you should iterate through the collection.

[].slice.call(document.getElementsByClassName('input-fieldset'))
  .forEach(function(elem) {
      elem.classList.add('cls');
  });

edited Jun 14 '14 at 12:15

answered Jun 14 '14 at 12:10

Ram

143,282
16
168
197

Struggling with classList.add and getElementsByClassName

3 Answers3

Linked