JavaScript 不会将显示更改为“无”答案

【问题标题】：JavaScript will not change display to "none"JavaScript 不会将显示更改为“无”
【发布时间】：2022-11-24 13:05:55
【问题描述】：

我正在尝试向按钮添加单击事件处理程序，这将导致它将登录表单的 CSS 显示属性更改为“无”。

JS：

// make the form disappear when the user clicks initSignUpBtn
const initSignUpBtn = document.querySelector(".btn signup-btn");
initSignUpBtn.addEventListener("click", () =>{
    document.getElementById("signinForm").style.display="none";
});

HTML：

<form class="signin-form" id="signinForm">
    <div class="form-group">
        <input type="email" class="email-input" id="emailInput" placeholder="Email or username">
    </div>
    <div class="form-group">
        <input type="password" class="pass-input" id="passwordInput" placeholder="Password">
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Remember me<a class="need-help" href="#">Need Help?</a>
        </label>
    </div>
    <button type="button" class="btn signin-btn" id="signinbtn">Sign in</button>
    <button type="button" class="btn signup-btn" id="initSignUpBtn">New? Sign up!</button>

</form>

我向按钮添加了一个类型为“单击”的事件侦听器，并编写了一个匿名函数，将表单的显示属性更改为“无”，但这没有用。

【问题讨论】：

像这样尝试：const initSignUpBtn = document.querySelector(".signup-btn");

标签： javascript html css

【解决方案1】：

您的 querySelector 不正确。为什么不使用 document.getElementById("initSignUpBtn") 既然你有 ID？如果你想使用querySelector，它应该是document.querySelector(".btn.signup-btn")或document.querySelector(".signup-btn")。

【讨论】：

哇，非常感谢 Zac Anger，它成功了！感谢您对新手程序员友好，并指出我的愚蠢错误。看起来我犯了以下两个错误：1）我使用的是 getElementsById（复数）而不是 getElementById 2）我没有在 btn 和 signup-btn 之间放置句点。

【解决方案2】：

你可以试试这个逻辑：

<form class="signin-form" id="signinForm">
    <div class="form-group">
        <input type="email" class="email-input" id="emailInput" placeholder="Email or username">
    </div>
    <div class="form-group">
        <input type="password" class="pass-input" id="passwordInput" placeholder="Password">
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Remember me<a class="need-help" href="#">Need Help?</a>
        </label>
    </div>
    <button type="button" class="btn signin-btn" id="signinbtn">Sign in</button>
    <button type="button" class="btn signup-btn" id="initSignUpBtn">New? Sign up!</button>

</form>

const initSignUpBtn = document.querySelector(".btn.signup-btn");
initSignUpBtn.addEventListener("click", () =>{
    document.getElementById("signinForm").style.display="none";
});

<form class="signin-form" id="signinForm">
    <div class="form-group">
        <input type="email" class="email-input" id="emailInput" placeholder="Email or username">
    </div>
    <div class="form-group">
        <input type="password" class="pass-input" id="passwordInput" placeholder="Password">
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Remember me<a class="need-help" href="#">Need Help?</a>
        </label>
    </div>
    <button type="button" class="btn signin-btn" id="signinbtn">Sign in</button>
    <button type="button" class="btn signup-btn" id="initSignUpBtn">New? Sign up!</button>

</form>

【讨论】：