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

当按下某个按钮时，我试图使我的登录屏幕显示和取消显示，但我的代码似乎不起作用，总是出现问题

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>

用户名：

密码：

这是默认情况下必须隐藏的表单

这适用于我：

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

用户名：

密码：

显示屏幕
函数show（）{
document.getElementById（'logon'）.style.display='block'；//显示#logon div
document.getElementById（'button'）。innerHTML='Hide Screen'；
}
函数hide（）{
document.getElementById（'logon'）.style.display='none'；//隐藏#logon div
document.getElementById（'button'）。innerHTML='Show Screen'；
}

以下是一个简单实用的小方法，可以帮助您完成以下任务： JSFiddle：

---

如何做到这一点？不需要使用jQuery。您的代码看起来很好，您肯定还缺少其他东西。如果我使用jqeury，请像这样使用$（'logon'）.hide（）；但这也会带来同样的问题。我正在使用netbeans，它在样式上出现错误，但它将继续运行。我找到了解决方案。if语句上面的javascript代码在加载页面时没有运行，所以我在我的主体中添加了一个onload函数，这样它将运行函数并隐藏“logon”，这不是有点笨重和重复吗？这是一个你想要的切换，而不是两个不同的函数，它们只是重复代码并做一些小的修改。四个

document.getElementById（）

当只需要一个时。不必要的标记只是为了处理按钮的JavaScript状态。只是为了显示，以便他决定使用。显示或隐藏功能

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

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