CODEWITHSUNDEEP
javascripthtmlcss
Gaurab Rana
Gaurab Rana

Reputation: 121

button onclick change visibility of a class using javascript

So I am trying to change the visibility of class "feel" and "feels" when user clicks on button "signup" using javascript but I am not getting anywhere. Nothing happens when i click on the button. I have set visibility of class "feels" hidden at first. After user clicks on button it should change to visible and visibility of class "feel" should change to hidden.

document.getElementById("btn").addEventListener("click", function(e) {
  signup()
});

function signup() {
  document.getElementsByClassName("feel").style.visibility: "hidden";
  document.getElementsByClassName("feels").style.visibility: "visible";
}
<div class="feel">
  <h2>Be a part of this society to feel.</h2>
  <p><a href="">Forgot your password?</a> Doesn't have an account?
    <button id="btn" onclick="return(signup());" id="sign">Signup</button>
    <form action name="myForm" onsubmit="return(validate());">
      <input type="email" required placeholder="Email Address" name="email">
      <input type="password" placeholder="Password" name="pass">
      <input type="submit" name="submit" Value="Sign In">
    </form>
</div>
<div class="feels">
  <h1>Please provide the following informations:</h1>
  <form action name="form" onsubmit="return(validate1());">
    <input type="text" placeholder="Firstname" name="fname">
    <input type="text" placeholder="Lastname" name="lname">
    <input type="email" placeholder="Email Address" name="email">
    <input type="password" placeholder="Password" name="pass">
    <input type="password" placeholder="Re-type Password" name="repass">
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <input type="submit" name="submit1" Value="Submit">
  </form>
</div>

Upvotes: 0

Views: 3011

Answers (4)

Becky
Becky

Reputation: 5585

Try this. Here's a Sample Fiddle

document.getElementById("btn").addEventListener("click", signup);

function signup() {
  var a = document.querySelectorAll(".feel")[0];
  var b = document.querySelectorAll(".feels")[0];
  a.style.visibility = "hidden"
  b.style.visibility = "visible";
}

Upvotes: 1

Bilal Alam
Bilal Alam

Reputation: 894

As mentioned in the comments, the method getElementsByClassName returns an HTML Collection of all the occurence of that class found in the page instead of a single HTML element ( notice the 's' in getElementsByClassName which makes it plural). Therefore the compiler could not find any property style or visibility and it must have thrown an error on console, always make sure to watch console for errors when things does not work.

If you are sure that there would be only one element with that class, you should use id instead and then use getElementById method which returns a single object.

If you are sure there would be multiple element with that class make sure you know the position of the occurence of that class so that you can access it via index on HTML collection returned by getElementsByClassName

`document.getElementsByClassName("myClass")[0].style.visibility="hidden"`

P.S you can directly attach the signup function as an event handler document.getElementById("btn").addEventListener("click", signup);

Upvotes: 0

Artur Leinweber
Artur Leinweber

Reputation: 256

Your sign button has 2 id attributes: id="sign" and id="btn".

Then: you dont have a function called "return", put "return signup()" in your onclick attribute of the button.

Upvotes: 0

Maheer Ali
Maheer Ali

Reputation: 36574

You are using : which used in Object initializer but for assigning you should use =.

getElementsByClassName return a HTMLCollection. It doesnot have property style. You can use forEach() and querySelectorAll().

function signup()
{
   document.querySelectorAll(".feel").forEach(x => x.style.visibility = "hidden");
   document.querySelectorAll(".feels").forEach(x => x.style.visibility = "visible");
}

Working Snippet

document.getElementById("btn").addEventListener("click", function(e) {
  signup()
});

function signup()
{
       document.querySelectorAll(".feel").forEach(x => x.style.visibility = "hidden");
       document.querySelectorAll(".feels").forEach(x => x.style.visibility = "visible");
}
<div class="feel">
  <h2>Be a part of this society to feel.</h2>
  <p><a href="">Forgot your password?</a> Doesn't have an account?
    <button id="btn" onclick="return(signup());" id="sign">Signup</button>
    <form action name="myForm" onsubmit="return(validate());">
      <input type="email" required placeholder="Email Address" name="email">
      <input type="password" placeholder="Password" name="pass">
      <input type="submit" name="submit" Value="Sign In">
    </form>
</div>
<div class="feels">
  <h1>Please provide the following informations:</h1>
  <form action name="form" onsubmit="return(validate1());">
    <input type="text" placeholder="Firstname" name="fname">
    <input type="text" placeholder="Lastname" name="lname">
    <input type="email" placeholder="Email Address" name="email">
    <input type="password" placeholder="Password" name="pass">
    <input type="password" placeholder="Re-type Password" name="repass">
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <input type="submit" name="submit1" Value="Submit">
  </form>
</div>

Upvotes: 2

Related Questions