Javascript - Can ' T get 'getElementsByClassName" funktioniert

Im kämpfen, um herauszufinden, warum mein code nicht funktioniert. Hier ist der Teil des 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 );
    });
}

Hier ist ein Teil der 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>

Aus irgendeinem Grund, wenn ich das laden der Seite bekomme ich diesen Fehler:

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

Ich verstehe das nicht, denn wenn ich ändere diese Zeile in:

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

zu:

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

Es funktioniert!

Nicht warum die class-Selektor arbeiten, aber die id wird? Ich versuche, beide links mit der Klasse showMenu zum ausführen der JS.

InformationsquelleAutor George | 2015-02-07
  1. 5

    Dokument.getElementsByClassName gibt ein array zurück-wie Liste (eine HTMLCollection, um genau zu sein) von alle Elemente entsprechen den Namen der Klasse. Sie wohl interessieren das erste element, so versuchen Sie mit den folgenden statt:

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

    Wenn Sie kümmern sich um alle Elemente, die Sie benötigen, um eine Schleife durch die Elemente:

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

//...

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

    Weil document.getElementsByClassName() gibt eine Knoten-Liste, die ähnlich wie ein array.

    Also, wenn Sie haben mehrere Elemente, die Sie ansprechen möchten, müssen Sie eine Schleife mit einer for-Schleife oder .forEach() aber wenn Sie nur suchen für das N-te element mit dieser Klasse können Sie angeben, es ist index mit Klammer-notation:

    var showMenu = document.getElementsByClassName('showMenu')[0],
    InformationsquelleAutor Natsu
  3. 2

    Weil getElementsByClassName gibt ein array zurück-wie-Objekt von DOM-Elementen.

    Benötigen Sie den Zugriff auf jedes element und befestigen Sie den Ereignis-listener einzeln:

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

    ..oder:

    Array.prototype.forEach.call(showMenu, function(el, i) {
    el.addEventListener( clickevent, function( ev ) {
        //...
    });
});
    InformationsquelleAutor Josh Crozier
Schreibe einen Kommentar