JavaScript提交表单触发Cannot read properties of null错误求助

报错翻译 #

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 对应的中文含义是：未捕获的类型错误：无法读取空值的属性（正在读取addEventListener方法）

问题原因 #

你的JS代码执行时，浏览器还没完成HTML中id="form"的表单元素的解析渲染，document.getElementById('form')查询不到对应元素，返回值为null，尝试给null绑定事件监听就会触发该报错。

解决方法 #

你可以任选以下任意一种方案修复：

• 方案1：将JS代码移动到HTMLbody标签的最末尾，放在所有DOM元素之后，确保浏览器先加载完表单再执行JS逻辑
  示例结构：

  <body>
    <form id="form">
      <input type="text" id="username" placeholder="Username" required>
      <input type="email" id="email" placeholder="Email" required>
      <input type="submit" value="Register">
    </form>
    <!-- JS放在所有DOM节点之后 -->
    <script>
    var form = document.getElementById('form')
    form.addEventListener('submit',function(event){
      event.preventDefault()
      var username = document.getElementById("username").value
      console.log(username)
      var email = document.getElementById("email").value
      console.log(email)
    })
    </script>
  </body>
  

• 方案2：把JS逻辑包裹在DOMContentLoaded事件回调中，等待DOM全部加载完成后再执行代码
  示例代码：

  document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('form')
    form.addEventListener('submit',function(event){
      event.preventDefault()
      var username = document.getElementById("username").value
      console.log(username)
      var email = document.getElementById("email").value
      console.log(email)
    })
  })
  

• 方案3：给script标签添加defer属性，浏览器会等HTML解析完成后再执行对应JS代码，适合JS放在head标签内的场景
  示例结构：

  <head>
    <script defer>
    var form = document.getElementById('form')
    form.addEventListener('submit',function(event){
      event.preventDefault()
      var username = document.getElementById("username").value
      console.log(username)
      var email = document.getElementById("email").value
      console.log(email)
    })
    </script>
  </head>
  

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