单击按钮后显示新字段

Question

我想制作一个仅在单击按钮后显示的字段。
到目前为止，这是我的代码：

            <div class="control-group" style="display:none" id="passwordfield">
                <label class="control-label">Password:</label>

                <div class="controls"><input id="pw" type="password"></div>
            </div>

"display:none" 使它不可见，之后我有我的按钮和一个 javascript，它应该将显示更改为 "block"，从而使其再次可见。

            <div style="padding-left: 160px;padding-bottom:20px">
                <button class="btn btn-primary" onclick="showPWField()">Log-In</button>
                <script>
                    function showPWField() {
                        document.getElementByID("passwordfield").style.display = "block";
                    }
                </script>
            </div>

但这就是行不通。该函数被调用我用警报测试了它，但我无法更改样式：/

提前感谢您的帮助

Answer 1

错误是getElementByID不存在，你应该使用getElementById:

function showPWField() {
    document.getElementById("passwordfield").style.display = "block";
}

<div class="control-group" style="display:none" id="passwordfield">
                <label class="control-label">Password:</label>

                <div class="controls"><input id="pw" type="password"></div>
            </div>

      <div style="padding-left: 160px;padding-bottom:20px">
            <button class="btn btn-primary" onclick="showPWField()">Log-In</button>
            <script>
                function showPWField() {
                    document.getElementById("passwordfield").style.display = "block";
                }
            </script>
        </div>

Answer 2

Javascript 区分大小写，你使用的方法是 getElementByID() 在 javascript 中不起作用，最好使用 getElementById()

函数 showPWField() { document.getElementById("passwordfield").style.display = "block"; }enter code here

单击按钮后显示新字段

Show new field after button click

html

javascript

css

button