addEventListener Modul Muster

Question

Ich weiß nicht, warum, aber wenn ich auf auf „Button“ nichts passiert ...

Keine Meldung in der Konsole, keinen Fehler. Wie man es repariert ?

JS

var bird = (function(){ 

    let button = document.querySelector('#addBird'); 

    button.addEventListener('click', addBird); 

    function addBird() 
    { 
     console.log('addBird'); 
    }; 

    return { 
     addBird: addBird 
    }; 
})(); 

HTML

<button id="addBird">Add Bird</button> 

Answer 1

versuchte gerade dieses Beispiel in CodePen:

http://codepen.io/JasonGraham/pen/pbowXz

var bird = (function(){ 

    let button = document.querySelector('#addBird'); 
    button.addEventListener('click', addBird); 

    function addBird() 
    { 
     console.log('addBird'); 
    }; 

    return { 
     addBird: addBird 
    }; 

})(); 

Soweit ich sehen kann, Ihren Code appe Ars, um wie erwartet zu arbeiten. Wenn Sie in Chrome auf die Schaltfläche klicken, wird die Meldung "addBird" jedes Mal in der Konsole protokolliert.

Erwarten Sie etwas anderes?

Answer 2

Dies passiert, weil das JavaScript geladen wird, bevor das DOM (im Grunde das HTML-Markup) bereit ist. Daher entspricht die button Variable NULL.

Zwei Möglichkeiten, dieses Problem zu lösen:

• am Ende der Seite Bewegen Sie JavaScript, um kurz vor dem </body>-Tag.
• Wickeln Sie Ihren JavaScript-Code mit Dokument jQuery-Ready-Funktion:
  $(function() { // code here });

Answer 3

Ok, wenn ich einfügen und außerhalb des #birdMod Es funktioniert ... So war es nicht der .render() Funktion. Danke für Ihre Hilfe. :)