javascript - 使登录屏幕可见/不可见 javascript

Question

我试图让我的登录屏幕在按下某个按钮时出现和消失，但我的代码似乎不起作用并且总是出现问题

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

这是我的 javascript 代码，它必须是标准的，被隐藏

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

这是默认必须隐藏的表单

Answer 1

这对我有用：

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

Answer 2

这是您想要做的一个小的简单实用方法：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";
};