Язык JavaScript - Не удается заставить "getElementsByClassName" работать

Question

Язык JavaScript - Не удается заставить "getElementsByClassName" работать

Я изо всех сил пытаюсь понять, почему мой код не работает. Вот часть 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 );
    });

Вот часть 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>

По какой-то причине, когда я загружаю страницу, я получаю эту ошибку:

TypeError: undefined is not a function (evaluating 'showMenu.addEventListener')

Я этого не понимаю, потому что, если я изменю эту строку:

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

Кому:

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

Это действительно работает!

Почему селектор классов не будет работать, но будет работать идентификатор?

Спасибо.

1

javascript html jquery websites programming

Author: George, 2015-02-07

Source

1 answers

score 1 · Accepted Answer

Попробуйте:

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

S в элементах в имени функции указывает на то, что может быть сопоставлено больше элементов.

Изменить:

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 );
    });
}