Слушатель событий не стрелял по клику

Question

Я создаю простую функцию, чтобы закрыть флеш-сообщение div на событие click, но мой слушатель не стреляет.

Я написал 3 различных функции, чтобы попытаться заставить их работать, но ничего не происходит, и консоль Chrome не говорит мне ничего.

Мой первый был в стиле класса ES6, это один:

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

Моя вторая была такова:

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

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

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

    addEventListeners(); 
}); 

Мой последний это:

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

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

Мой HTML:

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

Но никто из них не работал! Я не понимаю

С первых двух я получал undefined на моем this.getFlashMessages также не уверен, почему.

Answer 1

Я не очень знаком с ES6.

Но если я попробую подобный образец кода на javascript, он будет таким, как указано ниже, и я надеюсь, что он будет почти похож на ES6.

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

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

Здесь я звоню анонимную функцию, и его аргументом по умолчанию будет объект события, как указано в https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.

Answer 2

Мое решение не в ES6

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

см demo здесь