为什么我无法读取 null javascript 的属性“addEventListener”答案

【问题标题】：why i am getting Cannot read property 'addEventListener' of null javascript为什么我无法读取 null javascript 的属性“addEventListener”
【发布时间】：2021-07-27 15:56:18
【问题描述】：

谁能告诉我并解释为什么我在chrome的控制台上收到此错误“无法读取null的属性'addEventListener'”我正在NodeJS上构建一个聊天应用程序但我收到此错误任何人都可以帮我解决这个。

客户端 JS 代码。


Socket.on("message",(message)=>{
    console.log(message)
})

document.querySelector("#message-form").addEventListener("submit",(e)=>{
    e.preventDefault()
    const message = e.target.elements.message
    Socket.emit("sendMessage",message)
})

html代码

<html lang="en">
  <head>
    <title>Chatter</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="js/chat.js"></script>
  </head>
  <body> 
    <form id="message-form" >
        <input name="message" placeholder="Message">
        <button type="submit">Send</button>
    </form>
  </body>
</html>

如果有人需要服务器 ide JS，请发表评论，我将编辑问题谢谢。

【问题讨论】：

标签： javascript html node.js web web-deployment

【解决方案1】：

为什么我无法读取 null javascript 的属性“addEventListener”

因为当您的代码运行时，不存在 ID 为 message-form 的元素。浏览器还没有解析文档的那部分。

要么将你的脚本标签放在正文标签的末尾。

<body>
  <form id="message-form">
    <input name="message" placeholder="Message">
    <button type="submit">Send</button>
  </form>
  <script>
    document.querySelector("#message-form").addEventListener("submit", (e) => {
      e.preventDefault()
      const message = e.target.elements.message
      console.log(message);
    })
  </script>
</body>

或者把你的js代码放在document ready callback里面。

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelector("#message-form").addEventListener("submit", (e) => {
        e.preventDefault();
        const message = e.target.elements.message;
        console.log(message);
      });
    });
  </script>
</head>

<body>
  <form id="message-form">
    <input name="message" placeholder="Message">
    <button type="submit">Send</button>
  </form>
</body>

【讨论】：