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