Javascript - Can't Get 'getElementsByClassName' Working

Im struggling to figure out why my code is not working. Here is part of the JS: function init() { var showMenu = document.getElementsByClassName('showMenu'), perspectiv

Solution 1:

document.getElementsByClassName returns an array-like list (an HTMLCollection, to be exact) of all elements that match the class name. You probably care about the first element, so try using the following instead:

var showMenu = document.getElementsByClassName( 'showMenu' )[0],

If you care about all of the elements, you'll need to loop through the elements:

var showMenu = document.getElementsByClassName( 'showMenu' ),

// ...

for ( var i = 0; i < showMenu.length; ++i ) {
    showMenu[i].addEventListener( clickevt, function( ev ) {
        // Your code here
    });
}

Solution 2:

That's because document.getElementsByClassName() returns a node list, which is similar to an array.

So if you have multiple elements you wish to target, you'll have to loop through them with a for loop or .forEach() but if you're only looking for the nth element with this class then you can specify it's index with bracket notation:

var showMenu = document.getElementsByClassName('showMenu')[0],

Solution 3:

It's because getElementsByClassName return an array-like object of DOM elements.

You need to access each element and attach the event listener individually:

for (var i = 0; i < showmenu.length; i++ ) {
    showMenu[i].addEventListener( clickevent, function( ev ) {
        // ...
    });
}

..or:

Array.prototype.forEach.call(showMenu, function(el, i) {
    el.addEventListener( clickevent, function( ev ) {
        // ...
    });
});