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

Question

谁能告诉我并解释为什么我在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，请发表评论，我将编辑问题，谢谢。

Answer 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 代码放在文档就绪回调中。

 <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>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-05 10:39:11

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-05 10:39:11

解决方案1
0 已采纳 2021-05-05 10:39:11