JavaScript中输入框值无法存入变量？如何将其传给其他函数使用

原代码存在的问题 #

• 执行时机错误：const numberOfBar = onSubmit(); 是页面加载时同步执行的，此时用户尚未输入内容、点击提交，取到的是空值转换后的NaN，后续提交操作也不会更新该变量。
• 变量赋值逻辑错位：onSubmit的返回值没有绑定到全局变量的更新流程，仅在页面初始化时取了一次空值。
• 变量声明方式错误：如果需要后续更新变量值，不能用const声明不可修改的变量，需使用let声明可变更的外层作用域变量。
• 原表单的<label>未关联输入框，点击文本无法聚焦输入框，属于可优化的规范点。

修正后可直接运行的代码 #

<form>
  <!-- 补充for属性关联输入框，点击label可直接聚焦输入 -->
  <label for="num">Number Of bars</label>
  <br />
  <input type="number" id="num" value="" />
  <button type="button" onclick="onSubmit()">Submit</button>
  <!-- 测试按钮：验证其他函数可正常调用存入的变量 -->
  <button type="button" onclick="testBarCount()">查看已提交的bars数量</button>
</form>

<script>
// 在外层作用域声明可修改的变量，所有后续定义的函数均可直接访问
let numberOfBar = null;

function onSubmit(){
  const rawInput = document.getElementById("num").value;
  const num = Number(rawInput);
  // 增加无效值校验，避免脏数据存入变量
  if (isNaN(num) || num <= 0) {
    alert("请输入大于0的有效数字");
    numberOfBar = null;
    return;
  }
  // 提交时给外层变量赋值
  numberOfBar = num;
  // 如需要返回值可直接保留return
  return numberOfBar;
}

// 其他需要复用该变量的函数示例
function testBarCount() {
  if (numberOfBar === null) {
    alert("还未提交有效的bars数量");
    return;
  }
  alert(`当前已存入的bars数量为：${numberOfBar}`);
}
</script>

核心逻辑说明 #

• 变量声明在全局作用域，不会被限制在某个函数的作用域内，所有绑定的事件函数、自定义业务函数都可以直接读写numberOfBar。
• 取值逻辑完全绑定在按钮点击事件上，只有用户主动提交时才会执行，不会出现页面加载时提前取空值的问题。
• 支持多次提交更新变量值，用户修改输入后再次点击提交，numberOfBar会同步更新为最新的有效值。
• 增加了输入校验，避免空值、负数、非数字等无效内容存入变量，导致后续业务逻辑报错。

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