Question

我正在尝试为我的div添加一个关闭按钮。一切正常，但没有关闭，我无法理解为什么...

代码在这里

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>

Answer 1

您不能使用“ close（）”作为函数名称，它似乎是保留的（这很有意义）。只需使用其他名称即可。

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>

Answer 2

Window.close()是JavaScript中的保留字。

Window.close()方法将关闭当前窗口或在其上被调用的窗口。

使用该名称作为函数名称时，该函数实际上被Window.close()覆盖，什么也没发生。

将函数名称从close更改为其他名称。

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>

Answer 3

正如其他答案所述，close是保留字，但这似乎仅适用于内联JS。您可以将事件侦听器的代码移到HTML之外，并且仍使用close作为函数名。另外一个好处是，在HTML中不包括JS被认为是一种好习惯。

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>

关闭div-JavaScript无法正常运行

3 个答案: