addEventListener绑定事件无法将HTML输入内容输出到控制台

• submit事件仅会在<form>表单元素上触发，普通<button>元素不存在该事件的触发逻辑，你给发送按钮绑定submit事件的回调永远不会执行。
• 该问题和DOM元素获取方式无关，无论使用querySelector还是getElementById，只要选中了正确的DOM节点都不会影响事件绑定逻辑，因此更换选择器方法无法解决问题。

方案1：更换绑定事件为click（改动最小） #

直接将给按钮绑定的事件类型从submit改为click即可，修正后代码如下：

const user_send = document.querySelector("#send-btn");
const user_msg = document.querySelector("#input-msg");

user_send.addEventListener("click", () => {
    const msg = user_msg.value.trim();
    console.log(msg);
});

该方案默认不支持回车键触发发送，如果需要该功能，要额外给输入框绑定键盘事件判断回车按键：

user_msg.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    const msg = user_msg.value.trim();
    console.log(msg);
  }
})

方案2：使用form包裹输入区域，绑定submit事件（推荐，符合常规交互） #

这是聊天输入场景的通用实现方式，天然支持按钮点击、回车键触发发送，不需要额外写键盘监听逻辑。
首先修改HTML结构，用form标签替换原有外层div，同时把按钮type改为submit：

<form class="chat-input" id="chat-input">
    <input type="text" id="input-msg" placeholder="Enter message..."/>
    <button class="send-btn" type="submit" id="send-btn">
        <img src="send.png" alt="send-btn">
    </button>
</form>

之后将submit事件绑定到form元素上，注意要阻止表单默认提交的页面刷新行为：

const chat_form = document.querySelector("#chat-input");
const user_msg = document.querySelector("#input-msg");

chat_form.addEventListener("submit", (e) => {
    e.preventDefault(); // 阻止表单默认提交刷新页面
    const msg = user_msg.value.trim();
    console.log(msg);
    user_msg.value = ""; // 发送后清空输入框
});

内容的提问来源于stack exchange，提问作者Kushal Chapagain