Struggling with classList.add and getElementsByClassName

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


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