如何修复PHP文件中引入的JavaScript不生效、表单切换无响应问题

核心错误点 #

• JS代码在DOMContentLoaded事件外直接调用setFormMessage(loginForm, ...)，此时loginForm未定义、DOM也未加载，直接抛出全局错误，阻断所有后续脚本执行。
• 变量名不匹配，注册表单变量定义为const createAccount = document.querySelector("#createAccount")，后续切换表单时全部误用为createAccountForm，无法找到对应元素。
• 类名不匹配，CSS中定义的隐藏类是.form--hidden，JS切换状态时使用的是form-hidden，少了中间的连字符，导致样式不生效。

修复后的代码 #

修复后的JS代码 #

function setFormMessage(formElement, type, message) {
    const messageElement = formElement.querySelector(".form__message");

    messageElement.textContent = message;
    messageElement.classList.remove("form__message--success", "form__message--error");
    messageElement.classList.add(`form__message--${type}`);
}

function setInputError(inputElement, message) {
    inputElement.classList.add("form__input--error");
    inputElement.parentElement.querySelector(".form__input--error-message").textContent = message;
}

function clearInputError(inputElement) {
    inputElement.classList.remove("form__input--error")
    inputElement.parentElement.querySelector(".form__input--error-message").textContent = "";
}

document.addEventListener("DOMContentLoaded", () => {
    const loginForm = document.querySelector("#login");
    // 统一变量名，避免后续调用出错
    const createAccountForm = document.querySelector("#createAccount");

    document.querySelector("#linkCreateAccount").addEventListener("click", e => {
        e.preventDefault();
        // 类名和CSS保持一致
        loginForm.classList.add("form--hidden");
        createAccountForm.classList.remove("form--hidden");
    });

    document.querySelector("#linkLogin").addEventListener("click", e => {
        e.preventDefault();
        loginForm.classList.remove("form--hidden");
        createAccountForm.classList.add("form--hidden");
    });

    loginForm.addEventListener("submit", e => {
        e.preventDefault();
        // 此处可自行补充AJAX/登录请求逻辑
        setFormMessage(loginForm, "error", "用户名/密码无效")
    });

    document.querySelectorAll(".form__input").forEach(inputElement => {
        inputElement.addEventListener("blur", e => {
            if (e.target.id == "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
                setInputError(inputElement, "用户名长度不能少于10位");
            }
        });

        inputElement.addEventListener("input", e => {
            clearInputError(inputElement);
        });
    });
});

可选优化：调整脚本引入位置 #

可以把HTML头部的<script src="js/signup.js"></script>移动到</body>标签之前，避免脚本加载阻塞页面渲染，修改后如下：

<!-- 原有body内的所有代码 -->
</div>
<script src="js/signup.js"></script>
</body>

内容的提问来源于stack exchange，提问作者mita_maus070