点击按钮且输入框为空时显示Alert弹窗的代码问题排查

你的代码存在三个关键问题，导致无法实现预期功能：

• 运算符使用错误：你用赋值运算符=判断输入框是否为空，这会把空字符串赋值给textInput.value，而非进行比较判断。正确的比较应该用严格相等运算符===。
• 事件绑定方式错误：checkButton.click()是直接触发按钮点击动作，而非监听用户的点击事件。这段代码只会在页面加载时执行一次，不会响应后续的用户点击操作。
• 逻辑结构错误：你把判断逻辑和事件触发写在同一个if条件里，不符合前端事件驱动的逻辑，应该在按钮的点击事件回调中进行输入值的判断。

修正后的代码 #

const checkButton = document.getElementById("check-btn");
const textInput = document.getElementById("text-input");
const result = document.getElementById("result");

// 给按钮绑定点击事件监听
checkButton.addEventListener("click", function() {
  // 用trim()去除首尾空格，避免用户仅输入空格的情况
  if (textInput.value.trim() === "") {
    window.alert("Please input a value");
  }
});

补充说明：加入trim()是为了处理用户只输入空格的场景，这种情况也应视为无有效输入，触发提示弹窗。

内容的提问来源于stack exchange，提问作者Dana Rutscher