為什么我無法讀取 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