CODEWITHSUNDEEP
javascripthtmlhiddenvisible
steve
steve

Reputation: 483

Make logon screen visible/invisible javascript

I'm trying to make my logon screen appear and dissappear when a certain button is being pressed but my code doesn't seem to work and always gives a problem

document.getElementById('logon').style.visibility='hidden';
        function showlogon(){
            document.getElementById('logon').style.visibility="visible";
        }

this is my javascript code it must be standard be hidden

<div id="logon">
                    <form name="login" method="post">
                        Username:<input name="username" type="text" size="14"/><br>
                        Password:<input name="password" type="password" size="14"/><br>
                        <input type="submit" value="Login"/>
                    </form>
                </div>

this is the form that must be hidden by default

Upvotes: 0

Views: 1198

Answers (2)

Johan Bouveng
Johan Bouveng

Reputation: 565

Here is a small simple utility method for what you want to do: JSFiddle: http://jsfiddle.net/W8XPR/

function get(id) {
    return document.getElementById(id);
};

function toggle(id) {
    el = get(id);
    el.style.display='none'==el.style.display?'':"none";
};

Upvotes: 1

KevinT.
KevinT.

Reputation: 372

This works for me:

                <div id="logon" style="display: none;">
                <form name="login" method="post">
                    Username:<input name="username" type="text" size="14"/><br>
                    Password:<input name="password" type="password" size="14"/><br>
                    <input type="submit" value="Login"/>
                </form>
            </div>
            <div id="button"><button onClick="show()">Show Screen</button></div>
            <script>
            function show() {
                document.getElementById('logon').style.display = 'block'; // Show the #logon div
                document.getElementById('button').innerHTML = '<button onClick="hide()">Hide Screen</button>';
            }

            function hide() {
                document.getElementById('logon').style.display = 'none'; // Hide the #logon div
                document.getElementById('button').innerHTML = '<button onClick="show()">Show Screen</button>';
            }
            </script>

Upvotes: 1

Related Questions