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?
To add multiple classes to an element, select the element and pass multiple classes to the classList. add() method, e.g. box. classList. add('bg-blue', 'text-white') .
toggle() The toggle() button is used for toggling classes to the element. It means adding a new class or removing the existing classes.
toggle() will add the CSS class if it does not exist in the classList array and return true . If the CSS class exists, the method will remove the class and return false . The classList. toggle() method supports adding and removing CSS classes whether they exist or not in your array with shorter lines of code.
classList are not fully supported in IE11, Safari or Opera Mini.
.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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With