事件侦听器没有响应答案

【问题标题】：Event Listener is not responding事件侦听器没有响应
【发布时间】：2022-01-10 05:47:55
【问题描述】：

我只是尝试做一个简单的模式，没有任何工作正常接受 HTML 和 CSS， Javascript 的行为就像它根本没有连接到 HTML 表一样。

它有一个我应该单击的按钮，事件处理程序应该使弹出窗口打开，但相反，弹出窗口在页面加载后立即显示，这与我的脚本完全相反。代码如下：

const pop = document.getElementById('pop')

const x = document.getElementById('x')

const overlay = document.getElementById('overlay')

const modal = document.getElementById('modal')


const open = function() {
    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
}

const close = function() {
    modal.classList.add('hidden');
    overlay.classList.add('hidden');
}

pop.addEventListener('click', open, false);

x.addEventListener('click', close, false);

overlay.addEventListener('click', close, false);

.pop {
  padding: 10px 15px;
  background: #4e8b8f;
  border: none;
  border-radius: 1.2px;
  font-family: Impact;
  color: black;
  margin-top: 10px;
  cursor: pointer;
}

.modal {
  background-color: #4e8b8f;
  border-radius: 1.3px;
  padding: 1rem;
  width: 15rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font-family: Impact;
}

.x {
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  border: none;
  border-radius: 1px;
  color: red;
  font-size: 10px;
  cursor: pointer;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  border-radius: 2px;
  height: 100%;
  width: 100%;
  z-index: 5;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html>
   <!-----tab header---------------->
   <head>
      <title>Jalloh Web Construction Home</title>
      <link href=Afri-culture.css rel="stylesheet">
      <script src="Afri-culture.js"></script>
      <link rel="shortcut icon" type="image/jpg" href="jalloh white.jpg">
      <meta charset="utf-8" />
   </head>
   <header name="container">
      <!-----nav bar------>
      <div class="container">
         <img id="clarkweb" src="jalloh.jpg" alt="jalloh web construction">
         <nav>
            <ul>
               <!-----  <li><a href="https://www.etsy.com/shop/EastAmbienceLLC?ref=seller-platform-mcnav">Home</a></li>----->
               <li><a href="https://www.linkedin.com/in/geedo-jalloh/">About Me</a></li>
               <li><a href="#">My Hobbies</a></li>
               <li><a href="#">Contact Me</a></li>
            </ul>
         </nav>
      </div>
   </header>
   <h1>Welcome To My Portfolio</h1>
   <button class="pop" id="pop">Enter</button>
   <div class="modal hidden">
      <br>
      <button class="x" id="x">x</button>
      <img src="smokegif.gif" id="smoke">
      <h3>Under Construction</h3>
   </div>
   <div class="overlay hidden"></div>
   <body id=body>
      <br>
   </body>
   </div>
   </div>
   </div>
   <hr>
   <div class="container2">
      <footer>
         <a href="https://twitter.com/GeedoJalloh"><img id="clarktwo" src="jalloh white.jpg" alt="clark web"></a>
      </footer>
   </div>
</html>

【问题讨论】：

你确定没有别的东西在加载时调用 open() 函数吗？我建议您尝试将您的函数重命名为 openOverlay() 和 closeOverlay() 以确保。
部分问题：Why does jQuery or a DOM method such as getElementById not find the element?
如果出现问题，请始终检查开发者工具控制台是否有错误。
感谢指点！

标签： javascript html jquery css

【解决方案1】：

你使用document.getElementById('modal'):

const pop = document.getElementById('pop')

...

const modal = document.getElementById('modal')

const open = function() {
    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
}

...

pop.addEventListener('click', open, false);

但你没有为它设置id="modal"：

<div class="modal hidden">

【讨论】：

感谢您指出这一点，我现在会修复它