Struggling with classList.add and getElementsByClassName [duplicate]

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?

Bhatt

You are getting an array of elements from getElementsByClassName, try targeting only a particular element – Divertissement

Answer 1

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

Fetter

classList, (compatibility). – Are

Classlist is a cleaner. better and relatively new way to add classes to elements. It doesn't involve manipulating the className string – Divertissement

Thanks for the heads up guys. I modified my code to reflect your comments. – Fetter

Thank you very much, I'v been looking for it all day, finally you gave me the working code – Dive

Is it the same code to remove class? – Dive

@Khalil, yes, of course. – Fetter

Answer 2

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');
}

Soiree

Answer 3

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');
  });

Johnsonjohnsonese