I Have input field and button in HTML.
<div class="chat-input" id="chat-input">
<input type="text" id="input-msg" placeholder="Enter message..."/>
<button class="send-btn" type="button" id="send-btn">
<img src="send.png" alt="send-btn">
</button>
</div>
I create the constant for input section and button in client side javascript file.
const user_send =document.querySelector("#send-btn");
const user_msg=document.querySelector("#input-msg");
and add the eventlistener in send button.
user_send.addEventListener("submit",()=>{
const msg = user_msg.value;
console.log(msg);
});
But it does not send the value to the console.
I also try by getElementById but it doesnot work.
replace
addEventListener("submit"..
by user_send.addEventListener("click"
When the user click on the button, your const get the value of the input.
Try this
const user_send = document.querySelector("#send-btn");
const user_msg = document.querySelector("#input-msg");
user_send.addEventListener("click", () => {
const msg = user_msg.value;
console.log(msg);
}); <div class="chat-input" id="chat-input">
<input type="text" id="input-msg" placeholder="Enter message..." />
<button class="send-btn" type="button" id="send-btn">
<img src="send.png" alt="send-btn">
</button>
</div>