What should I do in this case - getelementsbyclassname not working

506    Asked by AntonyBence in Java , Asked on Oct 11, 2022

Im struggling to figure out why my code is not working. Here is part of the JS:


function init() {
    var showMenu = document.getElementsByClassName('showMenu'),
        perspectiveWrapper = document.getElementById( 'perspective' ),
        container = perspectiveWrapper.querySelector( '.container' ),
        contentWrapper = container.querySelector( '.wrapper' );
    showMenu.addEventListener( click event, function( ev ) {
        ev.stopPropagation();
        ev.preventDefault();
        doc scroll = scrollY();
        // change top of contentWrapper
        contentWrapper.style.top = doc scroll * -1 + 'px';
        // mac chrome issue:
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        // add modal view class
        classie.add( perspectiveWrapper, 'modalview' );
        // animate..
        setTimeout( function() { classie.add( perspectiveWrapper, 'animate' ); }, 25 );
    });
Here is part of the HTML:

    

Company


    



    

Company


    

For some reason when I load the page, I get this error:
TypeError: undefined is not a function (evaluating 'showMenu.addEventListener')
I don't understand this because if I change this line:
var showMenu = document.getElementsByClassName('showMenu'),
to:
var showMenu = document.getElementById( 'showMenu' ),

It does work!


Why won't the class selector work but the id one will?

Answered by Ira Joshi

For getelementsbyclassname not working


Try:

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

The s in Elements in the function name indicates more than elements may be matched.

var showMenu = document.getElementsByClassName('showMenu')

...

for(var i = 0, j = showMenu.length; i < j xss=removed xss=removed xss=removed xss=removed>

Your Answer