1

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?

Thanks.

1

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; i++)
{
    showMenu[i].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 );
    });
}
4
  • Thanks for helping. The first link with the class 'showMenu' now works and displays the menu but the second won't! If I set the [0] to [1] the second link works and not the first. How can I set it so both work? I tried [0,1] but that didn't work.
    – George
    Feb 7 '15 at 20:50
  • I have edited my post.
    – Mex
    Feb 7 '15 at 21:11
  • Thanks - changed my code to that but now none of the links are working and this is the console error: [Error] TypeError: undefined is not a function (evaluating 'showMenu.addEventListener') init (menu.js, line 50) (anonymous function) (menu.js, line 89) global code (menu.js, line 91)
    – George
    Feb 7 '15 at 21:28
  • Edited it again, sorry.
    – Mex
    Feb 7 '15 at 21:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.