事件侦听器没有响应
Posted
技术标签:
【中文标题】事件侦听器没有响应【英文标题】：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" >
<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" ></a>
</footer>
</div>
</html>【问题讨论】：
你确定没有别的东西在加载时调用 open() 函数吗？我建议您尝试将您的函数重命名为 openOverlay() 和 closeOverlay() 以确保。 部分问题：Why does jQuery or a DOM method such as getElementById not find the element? 如果出现问题，请始终检查开发者工具控制台是否有错误。 感谢指点！ 【参考方案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">
【讨论】：
感谢您指出这一点，我现在会修复它以上是关于事件侦听器没有响应的主要内容，如果未能解决你的问题，请参考以下文章
Discord Bot 响应短语（Discord.py 重写）
动态 HTML 上的事件绑定，使用 fetch 和 forEach 内