Event-Listener nicht auf Klick

Question

Ich erstelle eine einfache Funktion, um eine Flash-Nachricht div auf Click-Ereignis zu schließen, aber mein Hörer feuert nicht.

Ich schrieb 3 verschiedene Funktionen, um zu versuchen, es funktioniert zu bekommen, aber nichts passiert und Chrome-Konsole sagt mir nichts.

Mein erster in ES6 Klasse Stil war, dieses:

class closeFlashMessages { 
    constructor() { 
    this.getFlashMessages = document.querySelector("#flash-messages"); 

    this.addEventListeners(); 
    } 

    close() { 
    console.log(this.getFlashMessages); 
    this.getFlashMessages.className = "hide"; 
    } 

    addEventListeners() { 
    if(this.getFlashMessages) 
    this.getFlashMessages.addEventListener("click", this.close); 
    } 
} 
new closeFlashMessages(); 

Meine zweite war:

(function(){ 
    let getFlashMessages = document.querySelector("#flash-messages"); 

    function close() { 
    console.log(getFlashMessages); 
    getFlashMessages.className = "hide"; 
    } 

    function addEventListeners() { 
    getFlashMessages.addEventListener("click", function() { 
     close() 
    }); 
    } 

    addEventListeners(); 
}); 

Meine letzte ist dies:

(function(){ 
    let getFlashMessages = document.getElementById("flash-messages"); 
    getFlashMessages.addEventListener("click", close(getFlashMessages)); 

    function close (id) { 
    console.log(getFlashMessages); 
    getFlashMessages.className = "hide"; 
    } 
}); 

My HTML:

<div id="flash-messages"> 
     <div class="flash success"> 
      <p>Recept byl přidán do nákupního seznamu.</p> 
     </div> 
</div> 

Aber keiner von ihnen hat funktioniert !! Ich verstehe nicht

Mit den ersten beiden bekam ich undefined auf meinem this.getFlashMessages auch nicht sicher warum.

Answer 1

Ich bin nicht sehr vertraut mit ES6.

Aber wenn ich ähnliche Codebeispiel auf einem Javascript versuche, ist es wie unten gegeben und ich hoffe, dass es in ES6 aswell fast ähnlich sein wird.

var getFlashMessages = document.getElementById("flash-messages"); 
getFlashMessages.addEventListener("click", function() 
{ 
    clicked(getFlashMessages); 
}); 

function clicked(id){ 
    console.log(id); 
    id.className = "hide"; 
} 

Hier rufe ich anonyme Funktion, und sein Standardargument wird Ereignisobjekt sein, wie in https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener gegeben.

Answer 2

Meine Lösung ist in ES6 nicht

function Init(){ 
    var id = document.getElementById('flash-messages'); 
    var msg = document.querySelector('.flash'); 
    id.addEventListener('click',function(){ 
     msg.className = 'hide'; 
    }); 
} 
Init(); 

demo hier

sehen