如何存储用户输入并在其他函数调用？为何控制台输出undefined？

一、变量作用域限制 #

如果email是在函数内部用let/const声明的局部变量，外部作用域根本访问不到它，自然输出undefined。

错误示例：

function saveUserInput() {
  let email = document.getElementById('user-email').value;
}
console.log(email); // 这里输出undefined

解决办法：把变量声明在函数外部，作为全局作用域变量（简单场景下适用，复杂项目建议用状态管理或闭包封装）：

let email; // 全局作用域声明变量
function saveUserInput() {
  email = document.getElementById('user-email').value;
}
// 先调用赋值函数，再打印
saveUserInput();
console.log(email);

二、函数未返回目标值 #

如果是调用获取输入的函数时得到undefined，大概率是函数没有返回需要的输入值。

错误示例：

function getEmailInput() {
  let email = document.getElementById('user-email').value;
  // 没有return语句
}
console.log(getEmailInput()); // 输出undefined

解决办法：在函数末尾返回目标值：

function getEmailInput() {
  return document.getElementById('user-email').value;
}
// 确保用户已输入后调用函数
console.log(getEmailInput());

三、执行时机不对 #

如果页面刚加载就直接打印变量或调用函数，此时用户还没输入内容，变量还没被赋值，必然输出undefined。

错误示例：

let email;
function saveUserInput() {
  email = document.getElementById('user-email').value;
}
// 页面加载时立即执行，saveUserInput还没被触发
console.log(email); // 输出undefined

解决办法：绑定到用户交互事件（比如按钮点击、输入框失焦）后再执行打印逻辑：

<input type="email" id="user-email">
<button onclick="saveAndLogEmail()">保存并查看邮箱</button>
<script>
let email;
function saveUserInput() {
  email = document.getElementById('user-email').value;
}
function saveAndLogEmail() {
  saveUserInput();
  console.log(email); // 此时已经有用户输入的值
}
</script>

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