新手开发简易消息应用：输入框为空时禁用Send按钮求助

你的代码目前只在点击Send按钮时判断输入框状态，缺少页面加载时的初始状态设置和输入框内容变化时的实时监听，所以无法实现预期效果。以下是修复后的完整代码：

HTML 部分（保持原样即可） #

<div id="messages"></div>
<input type="text" id="val" />
<button id="sendMessage">Send</button>

JavaScript 部分（核心修复） #

// 获取页面元素
const sendBtn = document.getElementById("sendMessage");
const inputBox = document.getElementById("val");
const messagesWrap = document.getElementById("messages");

// 封装判断输入状态、设置按钮禁用状态的复用函数
function setBtnStatus() {
  sendBtn.disabled = inputBox.value.trim() === "";
}

// 页面加载时立刻初始化按钮状态
setBtnStatus();

// 监听输入框的输入事件，实时更新按钮状态
inputBox.addEventListener("input", setBtnStatus);

// 点击Send按钮的逻辑
sendBtn.addEventListener("click", () => {
  const inputContent = inputBox.value.trim();
  // 过滤纯空格的无效输入
  if (!inputContent) return;

  // 创建消息元素并添加到容器
  const message = document.createElement("p");
  message.textContent = inputContent;
  messagesWrap.appendChild(message);

  // 清空输入框并更新按钮状态
  inputBox.value = "";
  setBtnStatus();
});

关键修改说明 #

• 把按钮状态判断逻辑封装成函数，避免重复代码
• 页面加载时立即初始化按钮状态，确保输入框为空时按钮默认禁用
• 给输入框绑定input事件，只要内容变化（输入、删除、粘贴等）就实时更新按钮状态
• 点击事件中加入trim()处理，防止用户输入纯空格触发无效发送

内容的提问来源于stack exchange，提问作者IMRAN H