javascript 为什么onClick函数不能添加类到我的div?

dly7yett  于 2023-08-02  发布在  Java
关注(0)|答案(2)|浏览(89)

在这里,我试图通过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;
 }


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

qacovj5a

qacovj5a1#

您已经将链接上的href属性设置为空字符串,这将导致它链接到当前页面。每次你点击你的链接页面重新加载。
要防止在单击链接时出现默认行为,必须在传递给事件侦听器(showLoginForm)的事件上使用.preventDefault()

function showLoginForm(e) { //add 'e' as the first argument
    
    e.preventDefault(); //stop the default behaviour of the event
    
    document.getElementById('overlay').classList.add("showOverlay");
    document.getElementById('popUpForm').classList.add("showpopUpForm");

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

}

字符串

yxyvkwin

yxyvkwin2#

你的.showOverlay和.showpopUpForm类不工作,你应该像这样覆盖css,希望它能工作

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

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

字符串

相关问题