事件侦听器没有响应

Question

I am only attempting to do a simple modal, and nothing is working right accept the HTML and CSS, Javascript acts like it is not connected to the HTML sheet at all. I am only attempting to do a simple modal, and nothing is working right accept the HTML and CSS, Javascript acts like it is not connected to the HTML sheet at all.

It has a button that i am supposed to click and the event handler should make the popup open but instead, the popup shows up immediately after the page loads, which is totally contrary to my script.它有一个我应该单击的按钮，事件处理程序应该使弹出窗口打开，但是，弹出窗口在页面加载后立即显示，这与我的脚本完全相反。 Here is the code:这是代码：

<!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>

Here is the CSS file这是 CSS 文件

.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;
}

Here is the js file这是js文件

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);

Answer 1

You use document.getElementById('modal') :您使用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);

But you don't have id="modal" inside set for it:但是您没有为它设置id="modal" ：

<div class="modal hidden">

事件侦听器没有响应

问题描述

1 个解决方案

解决方案1
0 2021-12-03 22:46:59

事件侦听器没有响应

问题描述

1 个解决方案

解决方案1 0 2021-12-03 22:46:59

解决方案1
0 2021-12-03 22:46:59