ES6 单击按钮时将 div 显示为无

Question

我是 ES6 的新手，我试图在单击内部按钮时不向任何人显示 div。

我尝试了这个，但它不起作用：

const hide = () => {
  const z = document.getElementById('button')
  const y = document.getElementById('block')
  z.onclick = () => {
    y.style.display='none'
  }
}

<div id="block">
  <button id="button" onClick="hide()">my button</button>
</div>

有什么帮助吗？

Answer 1

您是第一次附加事件处理程序。第二次之后它将起作用并再次附加一个事件处理程序。

您不需要使用内联事件处理程序，避免这种类型的事件处理程序附件。您只需删除hide为内容提供服务的功能部分即可。当您的代码运行时，它将附加事件处理程序

const z = document.getElementById('button');
const y = document.getElementById('block');

z.onclick = () => {
    y.style.display = 'none';
};

<div id="block">
  <button id="button">my button</button>
</div>