classList.add() not working in a function?

Question

classList not working as expected

var button = document.getElementById('dropdown-trigger'),
    dropdownList = document.getElementsByClassName('dropdown-list'),

button.addEventListener('mouseover', displayDropdown);

function displayDropdown() {
  dropdownList.classList.add('none');
}

I keep getting in the console:

Uncaught TypeError: Cannot read property 'add' of undefined

But if I were to use classList like:

function displayDropdown() {
  button.classList.add('none');
}

It would work just fine. It seems like I can't use classlist on other elements?

check if dropdownList = document.getElementsByClassName('dropdown-list') is returning [] — vinayakj
– vinayakj, Commented Jul 19, 2015 at 20:42
In your 2 var declaration you have a , at the end instead of a ; — Zimmi
– Zimmi, Commented Jul 19, 2015 at 20:43

Wander Nauta · Accepted Answer · 2015-07-19 20:43:48Z

3

document.getElementsByClassName returns a list of elements, not a single element (hence the 'elements'). You'll want to add the class on each of these elements. If there's only a single dropdown list, you could also give it an ID and use getElementById instead.

answered Jul 19, 2015 at 20:43

Wander Nauta

19.7k1 gold badge50 silver badges65 bronze badges

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

Comments

Ram · Accepted Answer · 2015-07-19 20:50:54Z

2

It seems like I cant use classlist on other elements.

You can, but not on a NodeList collection. You should either iterate through the collection or get a specific item from the collection.

dropdownList[0].classList.add('none');

Another option is using the querySelector method instead of the getElementsByClassName. querySelector function selects the first matching element.

dropdownList = document.querySelector('.dropdown-list')

edited Jul 19, 2015 at 20:50

answered Jul 19, 2015 at 20:44

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

classList.add() not working in a function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related