JavaScript添加事件监听器出现Cannot read properties of null报错

控制台抛出的Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')是因为JS代码执行时机早于DOM渲染，document.querySelector('#confirm_password')运行时页面还没加载出id为confirm_password的输入框，返回值为null，对null调用addEventListener方法就会触发该错误。

除了DOM加载时序问题，代码还有6处语法、逻辑错误：

• 箭头函数语法不合法：passwordChecker => {}不符合箭头函数语法规则，无参数的箭头函数需要写为() => {}，且代码未声明变量存储该函数，后续绑定事件时无法读取到函数体
• 取值逻辑错误：判断密码长度时写的password.length取的是DOM对象的属性，DOM对象本身不存在length字段，要获取输入的密码内容需要访问password.value，再取value的长度
• 运算符误用：给提示文本赋值时用了严格比较符===，变量赋值应该使用单等号=
• 提示节点挂载错误：创建了p标签但从未给标签设置文本内容，且尝试将p标签作为子节点插入input元素内——input是自闭合标签，不支持插入子节点
• 事件绑定不全：仅给确认密码框绑定了校验事件，用户在第一个密码框输入结束时不会触发校验
• 缺少状态重置逻辑：密码不符合要求时会插入提示，但用户修改密码符合规则后没有对应移除提示的逻辑

将JS代码替换为以下内容即可，change事件默认在输入框失焦（即用户结束输入）时触发，完全匹配预期交互：

// 等待DOM全部渲染完成后再执行逻辑，从根源解决元素找不到的问题
document.addEventListener('DOMContentLoaded', () => {
  const passwordInput = document.querySelector('#password');
  const confirmPwdInput = document.querySelector('#confirm_password');
  const pwdValidationTip = document.createElement('p');
  pwdValidationTip.style.color = '#e53935'; // 可按需调整提示文字样式

  const checkPassword = () => {
    if (passwordInput.value.length < 8) {
      pwdValidationTip.textContent = '请输入长度至少为8位的密码';
      // 避免重复插入提示节点
      if (!passwordInput.nextElementSibling?.isSameNode(pwdValidationTip)) {
        passwordInput.after(pwdValidationTip);
      }
    } else {
      // 密码符合要求时移除提示
      pwdValidationTip.remove();
    }
  };

  passwordInput.addEventListener('change', checkPassword);
  confirmPwdInput.addEventListener('change', checkPassword);
});

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