javascript - 单击按钮后显示新字段

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>