如何解决JavaScript中HTML表单取值函数外返回undefined问题

问题原因 #

出现这个问题和作用域关系不大，核心是执行时机完全错了：

• 页面加载时，写在函数外层的console.log(username)会立刻执行，这时候用户既没填内容，也没点提交按钮，answerInput函数根本没运行，username连赋值操作都没发生，返回undefined是必然结果。
• 你当前代码里的username没有加let/const/var声明，非严格模式下虽然会自动挂载为全局变量，但也解决不了「代码跑在用户输入之前」的核心矛盾。

正确实现方案 #

方案1：所有依赖输入值的逻辑放在提交回调内（推荐，无全局污染） #

这是最符合前端交互逻辑的写法：只有用户完成输入、点击提交触发函数后，才去读取输入值、执行后续逻辑：

<form name="form">
  Enter name: 
  <input type="text" id="answer">
  <input type="button" value="Submit" onclick="answerInput()">
</form>

<script>
function answerInput() {
  // 函数触发时用户已经完成输入，能拿到最新值
  const username = document.getElementById("answer").value.trim()
  console.log(username)
  // 所有需要用到username的业务逻辑，直接写在这个作用域内即可
}
</script>

方案2：全局存值，赋值完成后再调用外部逻辑 #

如果确实需要跨函数访问输入值，先在全局作用域声明变量，等提交赋值完成后，再主动调用外部的处理逻辑，绝对不要在页面加载阶段直接读全局变量：

<form name="form">
  Enter name: 
  <input type="text" id="answer">
  <input type="button" value="Submit" onclick="answerInput()">
</form>

<script>
// 全局提前声明变量
let username = ''
function answerInput() {
  // 给全局变量赋值
  username = document.getElementById("answer").value.trim()
  // 赋值完成后，主动调用外部的处理函数
  doSomethingWithUsername()
}
// 把外部依赖username的逻辑封装成函数，等值准备好再调用
function doSomethingWithUsername() {
  console.log(username) // 此时可以正常读取到值
}
</script>

踩坑提醒：浏览器不会在变量更新后自动重新执行你之前写在全局的console.log，那行代码只会在页面加载时跑一次，后续变量变了它也不会再输出，这是新手最容易犯的认知错误。

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