Closing a div - javascript not wokring

Question

Im trying to add in a close button for my div. It opens all ok but doesnt close and I cant fathom why ...

The code is here

window.onload = function display() {
  document.getElementById("advert").style.display = "block";
}



function close() {
  document.getElementById("advert").style.display = "none";
}

<div id="advert">
  <div class="advert-content">
    <button class="Close" onclick="close()">&times;</button>
    <p>Content is here</p>
  </div>
</div>

score 5 · Answer 1 · answered Dec 04 '18 at 14:17

You can't use "close()" as a function name, it seems to be reserved (which makes kind of sense). Just use another name.

window.onload = function display() {
  document.getElementById("advert").style.display = "block";
}



function xclose() {
  document.getElementById("advert").style.display = "none";
}

<div id="advert">
  <div class="advert-content">
    <button class="Close" onclick="xclose()">&times;</button>
    <p>Content is here</p>
  </div>
</div>

that works! thank you so much! – T.alcock Dec 04 '18 at 14:18 — T.alcock, Dec 04 '18 at 14:18

Mamun · Answer 2 · 2018-12-04T14:26:49.197

Window.close() is a reserved word in JavaScript.

The Window.close() method closes the current window, or the window on which it was called.

When you use that name as your function name, that function is actually overridden by Window.close() and nothing happens.

Change your function name from close to some other name.

window.onload = function display() {
  document.getElementById("advert").style.display = "block";
}


function closeDiv() {
  document.getElementById("advert").style.display = "none";
}

<div id="advert">
  <div class="advert-content">
    <button class="Close" onclick="closeDiv()">&times;</button>
    <p>Content is here</p>
  </div>
</div>

Andy · Answer 3 · 2018-12-04T14:30:59.023

As the other answers have mentioned close is a reserved word, but that only seems to apply to inline JS. You can move the code for the event listener outside of the HTML and still use close as your function name. As an added benefit not-including JS in your HTML is considered good practice.

const button = document.querySelector('.close');
button.addEventListener('click', close, false);

function close() {
  document.getElementById("advert").style.display = "none";
}

<div id="advert">
  <div class="advert-content">
    <button class="close">&times;</button>
    <p>Content is here</p>
  </div>
</div>

Closing a div - javascript not wokring

3 Answers3