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

Question

我是 ES6 的新手，我试图在单击内部按钮时向 none 显示一个 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>