如何让JavaScript的username变量在多函数间全局可用？

先看你代码里的核心问题：

1. 变量作用域限制：getUsername里用let定义的username是函数局部变量，只能在该函数内部访问，sayUsername根本无法读取到它。
2. 拼写错误：sayUsername里的alert(userename)多打了一个字母e，正确拼写应为username，这也是触发报错的原因之一。

下面给你几种实现跨函数变量共享的方案，按需选择：

方案1：全局变量（简单但需谨慎） #

把username定义在所有函数外部，让它处于全局作用域，这样所有函数都能访问：

// 定义全局共享变量
let username;

function getUsername() {
  username = document.getElementById("usernameBox").value;
}

function sayUsername() {
  alert(username);
}

注意：全局变量容易被其他代码意外修改，多用户登录场景下很容易出现值被覆盖的问题，仅适合简单单用户场景使用。

方案2：闭包封装（安全的作用域隔离） #

把相关函数封装在闭包内，变量仅在闭包作用域内共享，不会污染全局环境：

const UserHandler = (function() {
  // 闭包内的私有变量，外部无法直接修改
  let username;

  return {
    getUsername: function() {
      username = document.getElementById("usernameBox").value;
    },
    sayUsername: function() {
      alert(username);
    },
    // 新增清空方法，解决多用户切换的变量污染问题
    clearUsername: function() {
      username = null;
    }
  };
})();

// 使用方式示例
// UserHandler.getUsername();
// UserHandler.sayUsername();
// 用户退出时调用清空：UserHandler.clearUsername();

这种方式下username的访问被严格控制，切换用户时调用clearUsername就能避免旧值残留导致的异常。

方案3：绑定DOM元素存储 #

如果用户名和输入框强关联，可以直接把值存在元素的自定义属性中，无需额外维护变量：

function getUsername() {
  const inputBox = document.getElementById("usernameBox");
  // 将值存入元素的dataset属性
  inputBox.dataset.savedUsername = inputBox.value;
}

function sayUsername() {
  const inputBox = document.getElementById("usernameBox");
  // 从dataset中读取值
  alert(inputBox.dataset.savedUsername);
}

这种方式不需要额外管理变量生命周期，适合简单的单场景使用。

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