事件听众没有点击发射

Question

我正在创建一个简单的功能，以关闭单击事件上的闪存消息，但是我的侦听器没有触发。

我编写了3种不同的功能以使其正常工作，但是什么都没有发生，Chrome Console不会告诉我任何事情。

我的第一个是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>

但是它们都没有工作！我不明白

在前两个中，我在this.getFlashMessages上遇到了不确定的，也不确定为什么。

Answer 1

我的解决方案不在es6

中

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

请参阅此处的演示

Answer 2

我对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/web/api/eventtarget/addeventlistener。