Error when using .classList.add

Question

I'm playing around with .classList and I'm getting some odd errors in my console. Here's my demo

Basically, I have an array of images all with the class of child and I'm doing a javascrpt .querySelectorAll to store those images in a variable for further manipulation.

var el = document.querySelectorAll('.child');

console.log(el.classList;);
el.classList.add("someClass");

But when I open up my console I'm getting some errors .

This one in reference to .classList; undefined And this one in reference to .classList.add();

 Uncaught TypeError: Cannot read property 'add' of undefined

Yet, when I switch to looking up elements by ID, the errors go away. Now using IDs isn't out of the question, but ideally I'd like to keep things to class Names. Any idea what's going on?

querySelectorAll, as the name implies, returns a collection of elements. The collection doesn't have a classList property. — cookie monster
– cookie monster, Commented May 3, 2014 at 19:18

fjc · Accepted Answer · 2014-05-03 19:24:22Z

2

el is a collection, not a single DOM element. classList does not make much sense for an array, though. So what you might want to do:

var product = document.getElementsByClassName('product');
var el = document.querySelectorAll('.child');
for(var i = 0; i < el.length; i++) {
    el[i].classList.add("someClass");
    console.log(el[i].classList);
}

answered May 3, 2014 at 19:24

fjc

5,85521 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mhartington Over a year ago

Thank you! This actually is more of what I need to do.

Collectives™ on Stack Overflow

Error when using .classList.add

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related