Question 219562 in Html Question posted in
Some basic documentation can be found here.

Html – Why onClick function is not adding class to my div?

Here I am trying to add class name to div through javascript using onClick function but it is not working . The console.log() is printing the message that means the function is being called but adding of class to div is not working . Please tell me the reason where I am doing wrong.

This is javascript code

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

This is my html button

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

This is my pop div on which I am adding classes

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

This is my css code

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

I have provided only the targeted part of code as the full code was very long . If any body wants to see the full code then please let me know in the comment box

Tags:

2

Answers


  1. 0

    You have set the href attribute on your link to an empty string, this will result in it linking to the current page. Every time you are clicking your link the page reloads.

    To prevent the default behaviour of following the link when you click it, you must use .preventDefault() on the Event that is passed to your event listener (showLoginForm)

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

}
    Login or Signup to reply.
  2. 0

    Your .showOverlay and .showpopUpForm classes are not working you should override the css like this hopefully it will work

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

#overlay.showOverlay {
    z-index: 1000;
    opacity: 1;
    background-color: red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search