JS登录功能代码报错：Uncaught TypeError: Cannot read properties of null

这个错误的核心是JS代码执行时，目标DOM元素还没被浏览器加载完成，或者元素选择器写错了，导致获取到的元素是null，自然无法调用addEventListener方法。下面针对你的写法逐一修正：

1. 修正选择器语法错误 #

你用getElementById("#login-form")是错误的——getElementById方法不需要加#前缀，直接传入id字符串即可。修正后的代码：

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

function onLoginBtnClick() {
    const value = loginInput.value;
    if (value === "") {
        alert("Please write your name.");
    } else {
        console.log(value); // 补充：实现输出用户名到控制台的功能
    }
}

loginButton.addEventListener("click", onLoginBtnClick);

2. 确保DOM加载完成后执行JS #

不管用哪种选择器，都要保证JS代码在DOM树构建完成后再执行，否则即使选择器正确，也会获取到null。有两种常用实现方式：

• 方式一：将JS代码放在HTML的</body>标签之前
  浏览器从上到下解析HTML，把JS放在页面底部，能确保所有DOM元素都已加载：

  <body>
    <!-- 你的登录表单HTML -->
    <form id="login-form">
      <input type="text" placeholder="输入用户名">
      <button type="button">登录</button>
    </form>
  
    <!-- JS代码放在这里 -->
    <script>
      // 你的JS代码
    </script>
  </body>
  

• 方式二：监听DOMContentLoaded事件
  如果JS必须放在<head>标签内，就用这个事件确保DOM加载完成后再执行代码：

  document.addEventListener("DOMContentLoaded", function() {
    const loginInput = document.querySelector("#login-form input");
    const loginButton = document.querySelector("#login-form button");
  
    function onLoginBtnClick() {
        const value = loginInput.value;
        if (value === "") {
            alert("Please write your name.");
        } else {
            console.log(value);
        }
    }
  
    loginButton.addEventListener("click", onLoginBtnClick);
  });
  

额外补充：完善目标功能 #

你原来的代码只处理了空输入的提示，上面的修正代码补充了非空时输出用户名到控制台的逻辑，完整实现了你的需求。

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