为什么我得到 Cannot read 属性 'addEventListener' of null javascript

Question

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

客户端ideJS代码。


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 请发表评论我将编辑问题谢谢。

Answer 1

why i am getting Cannot read property 'addEventListener' of null javascript

因为当您的代码运行时，不存在 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>

为什么我得到 Cannot read 属性 'addEventListener' of null javascript

why i am getting Cannot read property 'addEventListener' of null javascript

html

javascript

web-deployment

node.js

web