为何无法通过绑定HTML元素的全局变量初始化其他全局变量？

你直接在全局声明var whatMoq = userInputFormm.moq.value;时，脚本执行时机是页面DOM加载完成，但此时用户还没在输入框填值，所以whatMoq拿到的是空字符串。而且后续用户输入内容后，这个全局变量不会自动更新，导致函数调用时用的还是旧值。

不用在每个函数里重复声明变量，有以下几种解决方案：

方案1：全局存储DOM元素引用，用时再取value #

不直接存储输入值，而是把输入框的DOM元素存在全局，每次需要用的时候直接取它的value属性，这样拿到的永远是最新的用户输入：

const userInputForm = document.getElementById("form1");
const moqInput = userInputForm.moq; // 全局存输入框元素

function priceResults(){
  const whatMoq = moqInput.value;
  alert(whatMoq);
}

function anotherFunction(){
  const currentMoq = moqInput.value;
  // 这里用currentMoq做其他逻辑处理
}

方案2：封装获取值的函数，避免重复代码 #

如果不想每个函数里都写moqInput.value，可以写一个全局工具函数，专门获取当前MOQ的值，其他函数直接调用即可：

const userInputForm = document.getElementById("form1");

function getCurrentMoq(){
  return userInputForm.moq.value;
}

function priceResults(){
  const whatMoq = getCurrentMoq();
  alert(whatMoq);
}

function anotherFunction(){
  const currentMoq = getCurrentMoq();
  // 执行你的业务逻辑
}

方案3：监听输入事件，实时更新全局变量 #

如果必须用全局变量存储最新值，可以给输入框加input事件监听，每次用户输入时自动更新全局变量：

const userInputForm = document.getElementById("form1");
let whatMoq = ''; // 全局变量初始为空

// 监听输入框的输入事件，实时同步最新值到全局变量
userInputForm.moq.addEventListener('input', function(){
  whatMoq = this.value;
});

function priceResults(){
  alert(whatMoq); // 这里拿到的是用户最新输入的值
}

function anotherFunction(){
  // 直接使用whatMoq即可，它始终是最新值
  console.log(whatMoq);
}

内容的提问来源于stack exchange，提问作者Samuella M. Aglago