点击按钮检测输入框值仅读取初始值问题求助

兄弟，我一眼就瞅出问题所在啦！你当前的代码里，获取输入框值的操作只在页面加载时执行了一次，之后不管输入框内容怎么变，判断逻辑用的始终是最初的旧值，这就是为啥点击按钮识别不了后续输入内容的原因。

具体问题拆解 #

你这段代码：

let goals = document.getElementById("goals").value;

是页面加载完成后立刻执行的，它只会把当时输入框的初始内容（空值或者你设置的默认值）存到goals变量里。后续你在输入框输入新内容时，这个变量不会自动同步更新，所以点击按钮时的判断永远基于页面刚加载时的旧值。

修正方案 #

把获取输入框值的操作移到点击事件的回调函数内部，这样每次点击按钮时，都会重新读取输入框当前的最新内容，判断逻辑就能正常工作了。

修正后的JavaScript代码：

$("#submit").click(function() {
  // 每次点击按钮时，重新获取输入框的当前值
  let goals = document.getElementById("goals").value;
  // Check Goals Input
  if (goals === "") {
    console.log("fail");
  } else {
    window.print();
  }
});

额外小优化（基于jQuery） #

既然你已经引入了jQuery，也可以用更简洁的方式获取输入框值：

$("#submit").click(function() {
  let goals = $("#goals").val();
  if (goals === "") {
    console.log("fail");
  } else {
    window.print();
  }
});

这样修改后，不管你在输入框里输入多少次内容，点击按钮时都会读取最新的输入值，你的功能就能正常运行啦！

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