Event listener not firing on click

Question

I am creating a simple function to close a flash message div on click event, but my listener is not firing.

I wrote 3 different functions to try to get it working, but nothing is happening and Chrome console isnt telling me anything.

My first was in ES6 class style, this one:

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

My second was this:

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

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

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

  addEventListeners();
});

My last one is this:

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

But none of them worked!! I dont understand

With the first two, I was getting undefined on my this.getFlashMessages also not sure why.

Answer 1

My solution is not in ES6

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

see demo here

Answer 2

I am not very much familiar with ES6.

But if I try similar code sample on a javascript it will be as given below and I hope it will be almost similar in ES6 aswell.

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

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

Here, I am calling anonymous function, and its default argument will be event object as given in https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener .