Question

我目前在html文件中设置了2个按钮。

<div class="login-register">
            <button type="button" id="login" onclick="login()">Login</button>
            <button type="button" id="register">Register</button>
</div><!-- end of login-register -->

我想将javascript与这些按钮结合使用，以便在单击登录时使用。然后隐藏按钮和2个输入字段，如

<input id="username" type="text" name="username" placeholder="Username">
<input id="password" type="text" name="password" placeholder="Password">

出现。我使用的是内部脚本标记，到目前为止我只是，

$("#login").click(function(){
        var usernameInputField = document.createElement("login");
        usernameInputField.setAttribute('type', 'text');
        usernameInputField.setAttribute('placeholder', 'Username');
        usernameInputField.setAttribute('name', 'username');
    })

我不确定这是不是很好的做法，也不确定是否有另一种首选方法来设置它。

Answer 1

如果你想要纯JavaScript，我建议只是操纵样式。

它看起来像这样

YourElement.style.visibility = "hidden";

这是最佳做法吗？我认为这一切都取决于你的申请。但是在这样一个简单的事情上它运作良好。

Answer 2

总是有可能替换内部html或整个div。

例如

$("#login").on('click',function(){
     $('.login-register').html('<input id="username" type="text" name="username" placeholder="Username"><input id="password" type="text" name="password" placeholder="Password">');
});

但是，您的密码输入应为password

类型

Answer 3

    $("#login").click(function(){

        document.getElementById("login-register").style.visibility = "hidden";

        document.getElementById("username-password").style.visibility = "visible";

    })

使用javascript创建输入字段

3 个答案: