Show and hide divs when click button

Question

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");
let btn2 = document.getElementById("btn-signup");
let div2 = document.getElementById("signMe");

btn.addEventListener("click", () => {
    if (div.style.display === "none") {
        div2.style.display = "block";
    } else {
        div.style.display = 'none';
    }
})

 <div id="loglog">
                <form id="wrap">
                <img class="userImage" src="user.png" alt="user">
                <input id="email" type="text" name="email" placeholder="E-mail">
                <input id="password" type="password" name="password" placeholder="Password">
                <button id="btn-login" type="button" onclick="login()">Login</button>
                <div id="warning-msg"></p>
                </form>
            </div>

            <div id="signMe">
                <form id="Create">
                <h2>Create Account</h2>
                <input id="firstName" type="text" placeholder="First Name">
                <input id="lastName" type="text" placeholder="Last Name">
                <input id="newEmail" type="text" placeholder="E-mail">
                <input id="newPassword" type="password" placeholder="Password">
                <button id="btn-signup" type="button" onclick="registerUser()">Sign Up</button>
                <div id="warning-msg">
                </form>
            </div>

Hi expert people, I wanna know how to show the div2(signup button) when I click the div1 (login button) note: the display of div2 in css is "none"; and the login() & registerUser() function is for localstorage not on this problem. thank you.

A Haworth · Accepted Answer · 2020-10-25 08:59:54Z

4

The JS toggle function is good for toggling classes on and off.

Here's a simple example

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");

btn.addEventListener("click", () => {
    div.classList.toggle('hide');
})

.hide {
  display: none;
}

<button id="btn-login">Unshow/show</button>
<div id="loglog">Stuff to unshow on button click and show on the next button click</div>

answered Oct 25, 2020 at 8:59

A Haworth

37.6k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Over a year ago

thanks A Haworth! it's working! God Bless, till next time!

Wael Zoaiter · Accepted Answer · 2020-10-25 08:41:05Z

You should use window.getComputedStyle() to access the style properly of the element.

The window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");
let btn2 = document.getElementById("btn-signup");
let div2 = document.getElementById("signMe");

btn.addEventListener("click", () => {
console.log(div.style.display)
    if (window.getComputedStyle(div) === "none") {
        div2.style.display = "block";
    } else {
        div.style.display = 'none';
    }
});

You can read more about it from MDN

Collectives™ on Stack Overflow

Show and hide divs when click button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related