toggle display in pure javascript

Question

I am trying to toggle visibility of signup and signin boxes if sign in and sign up buttons are clicked. I am trying to use only pure javascript.

I wrote simple html and javascript as below:

<div>
    <button class="signin">sign in</button><button class="signup">sign up</button>

    <div class="signin-box" style="display: none;">
        <form class="signin-form">
            <label>username<input></label><label>password<input></label><button type="submit">signin</button>
        </form>
    </div>

    <div class="signup-box" style="display: none;">
        <form class="signup-form">
            <label>username<input></label><label>password<input></label><button type="submit">signup</button>
        </form>
    </div>
</div>

javascript part:

var signupButton = document.getElementsByClassName('signup')[0];
var signinButton = document.getElementsByClassName('signin')[0];
var signupBox = document.getElementsByClassName('signup-box')[0];
var signipBox = document.getElementsByClassName('signin-box')[0];

console.log("box: ", signupBox, "button: ",signupButton);

var toggleVisible = function(item){
    if (item.style.display === 'none'){
        return item.style.display = 'block';
    }else{
        return item.style.display = 'none';
    }
};

window.onload = function(){
    signupButton.onclick = toggleVisible(signupBox);
    signinButton.onclick = toggleVisible(signipBox);
};

The problem here is that the javascript toggleVisible is automatically activated even if i never clicked the buttons.

as a result, the signin-box and signup-box both gets display:block property.

How do i solve this problem?

The title is a bit misleading...what does this have to do with MongoDB? — Jason Cust
– Jason Cust, Commented Jun 17, 2015 at 21:11

Blender · Accepted Answer · 2015-06-17 21:19:54Z

5

You're calling the function, not passing it in. Just wrap your function call in an anonymous function:

signupButton.onclick = function() {
    toggleVisible(signupBox);
};

If you don't care about older browsers, you can also simplify your code a little if you put your JavaScript at the bottom of the <body> tag and add a rule to your CSS:

document.querySelector('.signup').addEventListener('click', function() {
    document.querySelector('.signup-box').classList.toggle('hidden');
}, false);

document.querySelector('.signin').addEventListener('click', function() {
    document.querySelector('.signin-box').classList.toggle('hidden');
}, false);

And the CSS:

.hidden {
    display: none;
}

answered Jun 17, 2015 at 21:19

Blender

300k55 gold badges463 silver badges512 bronze badges

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

Comments

MaxZoom · Accepted Answer · 2015-06-17 21:41:20Z

3

I would recommend to use a standard JavaScript method addEventListener() to attached onclick event listener to the button. It has following advantages over different solution:

You can attach an event handler to an element without overwriting existing event handlers.

You can add many event handlers of the same type to one element, i.e two "click" events.

In your code it will look like

window.onload = function(){
    signupButton.addEventListener("click", function() { toggleVisible(signupBox); });
    signinButton.addEventListener("click", function() { toggleVisible(signipBox); });
};

Current code invokes toggleVisible(..) method and assigns its result to the button attribute, which is not one would expect.

signupButton.onclick = toggleVisible(signupBox);

edited Jun 17, 2015 at 21:41

answered Jun 17, 2015 at 21:19

MaxZoom

7,7635 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

toggle display in pure javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related