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

Question

can any one please tell me and explain why I am getting this error "Cannot read property 'addEventListener' of null" on chrome's console I am building a chat application on NodeJS but I am getting this error can anyone help me please fix this.

client side JS code.


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 code

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

if anyone need the servers ide JS please comment I will edit the question thanks.

score 0 · Accepted Answer · answered May 05 '21 at 10:39

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

Because when your code runs, there doesn't exists an element with the id message-form. The browser haven't parsed that part of the document yet.

Either put your script tag at the end of the body tag.

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

Or put your js code inside of a 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>

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

1 Answers1