javascript - 显示 div onclick 不起作用

Question

我正在尝试在有人点击“关于我们”时在顶部显示如下所示的幻灯片:- ( http://www.w3schools.com/w3css/w3css_slideshow.asp )，但我什至无法让 onclick 部分正常工作。

到目前为止，我有:-

document.querySelector("p").addEventListener("click", function(){
    document.querySelector("div").style.display = "block";
});

#here{
  display: none;
}

  
<div id="here">Slideshow</div>
<p>About Us</p>

但由于某种原因它无法正常工作。有人能告诉我点击功能有什么问题吗？我试着给他们每个人单独的 ID，但我不确定还能尝试什么。提前感谢你们提供的任何帮助。

Answer 1

它应该可以工作，脚本 的位置 很重要，确保您的脚本在DOM 之后定义。或者您可以将脚本添加到 DOMContentLoaded 事件中。

document.addEventListener("DOMContentLoaded", function(event) { 
  //script here
});

document.querySelector("p").addEventListener("click", function(){
    document.querySelector("div").style.display = "block";
});

#here{display: none;}

<div id="here">Slideshow</div>
<p>About Us</p>