Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'),
        perspectiveWrapper = document.getElementById( 'perspective' ),
        container = perspectiveWrapper.querySelector( '.container' ),
        contentWrapper = container.querySelector( '.wrapper' );

    showMenu.addEventListener( clickevent, function( ev ) {
        ev.stopPropagation();
        ev.preventDefault();
        docscroll = scrollY();
        // change top of contentWrapper
        contentWrapper.style.top = docscroll * -1 + 'px';
        // mac chrome issue:
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        // add modalview class
        classie.add( perspectiveWrapper, 'modalview' );
        // animate..
        setTimeout( function() { classie.add( perspectiveWrapper, 'animate' ); }, 25 );
    });
}

Here is part of the HTML:

<div id="topBar">
    <h1>Company</h1>
    <a href="#" class="entypo-menu showMenu"></a>
</div>

<div class="line"></div>

<div id="fixedBar">
    <h1>Company</h1>
    <a href="#" class="entypo-menu showMenu"></a>
</div>

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? I'm trying to get both links with the class showMenu to perform the JS.

like image 574
George Avatar asked Dec 24 '22 23:12

George


1 Answers

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
    });
}
like image 50
kevinji Avatar answered Dec 28 '22 10:12

kevinji