Event Listener is not responding

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.

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:

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>

Are you sure nothing else call the open() function on load? I suggest you try to rename your functions as openOverlay() and closeOverlay() just to be sure. — E-telier, Dec 03 '21 at 22:47
Part of the problem: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Ivar, Dec 03 '21 at 22:48
Always check the developer tools console for errors if things don't work. — Ivar, Dec 03 '21 at 22:49

score 1 · Answer 1 · answered Dec 03 '21 at 22:46

You use 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:

<div class="modal hidden">

Event Listener is not responding

1 Answers1