button onclick change visibility of a class using javascript

Question

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>

getElementsByClassName returns array of elements not single element .Your syntax is totally incorrect Should be like this document.getElementsByClassName("feel")[0].style.visibility = "hidden"; — Serene Abraham Mathew
– Serene Abraham Mathew, Commented May 2, 2019 at 5:52
I forgot to remove that second id. Since I am self taught, and i am pretty much on basics right now I didn't know such difference could take place taking class and id. — Gaurab Rana
– Gaurab Rana, Commented May 2, 2019 at 6:27

Maheer Ali · Accepted Answer · 2019-05-02 05:53:04Z

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>

This is correct. OP can also refer the running code here : codesandbox.io/s/3vmxzv6p2m

Becky · Accepted Answer · 2019-05-02 06:12:15Z

1

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

answered May 2, 2019 at 6:12

Becky

5,6459 gold badges44 silver badges79 bronze badges

1 Comment

Gaurab Rana Over a year ago

so that 0 index means the first one of class .feel and .feels right? and why are we using addEventListener, i mean in the code i have used onclick. so i am confused about that.

Artur Leinweber · Accepted Answer · 2019-05-02 05:58:02Z

0

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.

answered May 2, 2019 at 5:58

Artur Leinweber

2561 silver badge6 bronze badges

Comments

Bilal Alam · Accepted Answer · 2019-05-02 06:05:35Z

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

Collectives™ on Stack Overflow

button onclick change visibility of a class using javascript

4 Answers 4

Working Snippet

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Working Snippet

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related