登录页面按钮click事件的addEventListener无效问题求助

问题核心 #

你的代码无法触发点击事件的根本原因是JS代码在DOM元素加载完成前就执行了，导致document.querySelector(".btn")返回null，无法绑定点击事件。另外，按钮嵌套在<form>标签内，点击会触发表单默认提交跳转，可能导致日志一闪而过。

修复方案 #

方案1：调整JS执行时机（最直接） #

把JS代码移到HTML文档末尾、</body>标签之前，确保DOM完全加载后再获取元素：

<!-- 原有HTML代码保持不变 -->
            <button id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
        </form>
    </div>
</div>
<script>
const inputs = document.querySelectorAll(".input");
// 用ID获取元素更精准，避免类名冲突
let submit = document.querySelector("#send");

submit.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止表单默认提交跳转
    console.log("test");
});
</script>
</body>

方案2：监听DOM加载完成事件（适合JS放在<head>的场景） #

如果JS代码必须放在页面头部，通过DOMContentLoaded事件确保DOM加载完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll(".input");
    let submit = document.querySelector(".btn");

    submit.addEventListener('click', (e) => {
        e.preventDefault();
        console.log("test");
    });
});

验证方式 #

修改后打开浏览器控制台（按F12），点击Login按钮，即可看到控制台打印的test消息。

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