在这里，我试图通过JavaScript使用onClick函数将类名添加到div中，但它不起作用。log（）正在打印消息，这意味着函数正在被调用，但是向div添加类不起作用。请告诉我我做错的原因。
这是JavaScript代码

<script>

  function showLoginForm(){
    document.getElementById('overlay').classList.add("showOverlay");
    document.getElementById('popUpForm').classList.add("showpopUpForm");

    console.log("Hello, world!");
    
  }

 // console.log("Hello, world!");
  var loginBtn = document.getElementById('loginBtn');

  loginBtn.addEventListener("click",showLoginForm);
</script>

字符串
这是我的html按钮

<li><button id="loginBtn" >LOGIN</button></li>

型
这是我正在添加类的流行div

<div id="overlay">
</div>

<div id="popUpForm">
  
      <div id="headTexts">
        <h1>Welcome back !</h1>
        <h3>Please enter your login details</h3>
      </div>
      <div id="btns">
        <button id="popLoginBtn">Login</button>
       
      </div>

      <div id="loginForm">
          
          <input type="text" name="" id="nameText" placeholder="phone" class="popInput">
          <input type="password" name="" id="paswText" placeholder="Password" 
  class="popInput">

          <input type="submit" value="Login" id="userLoginBtn">
      </div>
<div id="signupBox">
<p>Please enter your login details</p>
<button id="popSignupBtn">Signup</button>
</div>

</div>

型
这是我的css代码

#overlay {
height: 100vh;
width: 100vw;
background-color: rgb(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
z-index: -100;
transition: 0.5s;
opacity: 0;
}

 .showOverlay {
z-index: 1000;
opacity: 1;
background-color: red;
 }

   #popUpForm {
position: fixed;
height: auto;
width: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
z-index: 110;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
padding: 2vw;
opacity: 0;
top: -50%;
transition: 2s;
  }

.showpopUpForm {
top: 50%;
opacity: 1;
z-index: 1100;
}

#popLoginBtn {
text-decoration: none;
background-color: white;
color: black;
border: 0.15vw solid black;
padding: 0.8vw;
border-radius: 0.3vw;
margin-right: 0.5vw;
transition: 0.4s;
width: 10vw;
}

#popLoginBtn:hover {
background-color: red;
color: white;
}

 #popSignupBtn {
text-decoration: none;
background-color: black;
color: white;
border: 0.15vw solid black;
padding: 0.5vw;
border-radius: 0.3vw;
transition: 0.4s;
width: 10vw;
font-size: 1.1vw;
margin-top: 0.7vw;
 }

 #popSignupBtn:hover {
background-color: red;
color: white;
 }

  #btns {
margin-top: 2vw;
margin-bottom: 2vw;
display: none;
}

   #loginForm {
  display: flex;
  flex-direction: column;
align-items: start;
justify-content: center;
margin-top: 3vw;
 }

 .popInput {
width: 25vw;
padding: 0.5vw;
font-size: 1vw;
border: 0.1vw solid black;
border-radius: 0.3vw;
margin-top: 0.8vw;
}

 #userLoginBtn {
text-decoration: none;
background-color: rgb(0, 255, 162);
color: black;
border: 0.15vw solid rgb(0, 255, 162);
padding: 0.5vw;
border-radius: 0.3vw;
margin-top: 1vw;
transition: 0.4s;
width: 8vw;
font-size: 1.1vw;
}

  #userLoginBtn:hover {
background-color: red;
border: 0.15vw solid red;
color: white;
 }

 #signupBox {
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
margin-top: 3vw;
 }

型
我只提供了代码的目标部分，因为完整的代码非常长。如果任何机构希望看到完整的代码，然后请让我知道在评论框