javascript - ES6 Display div to none when button is clicked - Stack Overflow

admin管理员组

文章数量:1356227

I'm new at ES6 and I'm trying to display to none a div when an inner button is clicked.

I tried this but it's not working:

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>

I'm new at ES6 and I'm trying to display to none a div when an inner button is clicked.

I tried this but it's not working:

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>

Any help please?

• javascript
• ecmascript-6

Share Improve this question Follow edited Nov 14, 2017 at 11:43 3Dos 3,49733 gold badges2626 silver badges3939 bronze badges asked Nov 14, 2017 at 11:15 BeeLeeBeeLee 19355 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You are attaching an event handler for first time. After the second time it will work and will again attach an event handler.

You don't need to use inline event handler, avoid this type of event handler attachement. You can just remove the hide function part serving the content. When your code runs, it will attach the event handler

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>

Instead of hiding the div, your hide method is assigning a new onclick handler to your button.

Simply

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

本文标签： javascriptES6 Display div to none when button is clickedStack Overflow