登录按钮点击后弹窗不显示问题技术求助

我编写了登录页面的HTML代码，点击Login按钮后登录弹窗未显示，相关代码如下：

原JS代码 #

document.querySelector("#show-login").addEventListner("click", function() {
  document.querySelector("popup").classList.add("active")
});

document.querySelector(".popup.close-btn").addEventListner("click", function() {
  document.querySelector("popup").classList.remove("active")
});

原HTML代码 #

<div class="center">

  <button id="show-login">Login</button>

</div>

<div class="popup">

  <div class="close-btn">&times;</div>

  <div class="form">

    <h2>Log in</h2>

    <div class="form-element">

      <label for="email">Email</label>

      <input type="text" id="email" placeholder="Enter email">

    </div>

    <div class="form-element">

      <label for="password">Password</label>

      <input type="password" id="password" placeholder="Enter password">

    </div>

    <div class="form-element">

      <input type="checkbox" id="remember-me">

      <label for="remember-me">Remember me</label>

    </div>

    <div class="form-element">

      <button>Sign in </button>

    </div>

    <div class="form-element">

      <a href="#">Forgot password?</a>

    </div>

  </div>

问题分析及修复方案 #

1. JS方法名拼写错误

两处addEventListner都写错了，正确写法是addEventListener（注意单词里的第二个e）。

2. DOM选择器错误

• 弹窗选择器：document.querySelector("popup") 错误，HTML中弹窗是class为popup的div，应该用.popup作为选择器。
• 关闭按钮选择器：.popup.close-btn 错误，这表示同时拥有popup和close-btn类的元素，而实际close-btn是.popup的子元素，正确选择器是.popup .close-btn（中间加空格）。

3. HTML结构不完整

原HTML中.popup的<div>没有闭合，需要在末尾添加</div>。

4. 缺少弹窗显示/隐藏的基础CSS

弹窗默认需要隐藏，添加active类后才显示，补充以下CSS样式：

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 1000;
}

.popup.active {
  display: block;
}

.close-btn {
  cursor: pointer;
  float: right;
  font-size: 20px;
}

修正后的完整代码 #

JS代码

document.querySelector("#show-login").addEventListener("click", function() {
  document.querySelector(".popup").classList.add("active");
});

document.querySelector(".popup .close-btn").addEventListener("click", function() {
  document.querySelector(".popup").classList.remove("active");
});

HTML代码

<div class="center">
  <button id="show-login">Login</button>
</div>

<div class="popup">
  <div class="close-btn">&times;</div>
  <div class="form">
    <h2>Log in</h2>
    <div class="form-element">
      <label for="email">Email</label>
      <input type="text" id="email" placeholder="Enter email">
    </div>
    <div class="form-element">
      <label for="password">Password</label>
      <input type="password" id="password" placeholder="Enter password">
    </div>
    <div class="form-element">
      <input type="checkbox" id="remember-me">
      <label for="remember-me">Remember me</label>
    </div>
    <div class="form-element">
      <button>Sign in </button>
    </div>
    <div class="form-element">
      <a href="#">Forgot password?</a>
    </div>
  </div>
</div>

CSS代码

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 1000;
}

.popup.active {
  display: block;
}

.close-btn {
  cursor: pointer;
  float: right;
  font-size: 20px;
}

内容的提问来源于stack exchange，提问作者sweety