HTML表单获取的AM变量在其他函数中未定义的问题

我在HTML下拉表单中获取输入值存入AM变量，代码如下：

var e = document.getElementById("UserTimeAM");
function onChangeAM() {
  var AM = e.value;
  var text = e.options[e.selectedIndex].text;
  console.log(AM, text);
}
e.onchangeAM = onChangeAM;
onChangeAM();

调用API获取数据后，在forEach循环中使用AM变量时，报错AM is not defined，循环代码如下：

lowHigh.forEach(d =>{
    let wDate = new Date(d.time).getUTCDate();
    let AM_Hour = AM;
    let PM_Hour = PM;
    AM_Hour = ("0" + AM_Hour);

    if(wDate == i+1)
        {
            if(tidedata1.innerHTML == "")
            {
                
                tidedata1.innerHTML = `${AM_Hour}: - ${d.value}m`
                tidedata1Full.innerHTML = `${AM_Hour}:am - ${d.value}m`
            }
            else
            {
                tidedata2.innerHTML = `${PM_Hour}: - ${d.value}m`
                tidedata2Full.innerHTML = `${PM_Hour}:pm - ${d.value}m`
            }
        }
    })

我原本以为var声明的变量是全局变量，可以在不同函数间传递使用。

错误原因 #

你在onChangeAM函数内部用var AM声明变量，这会让AM变成函数作用域变量——只能在onChangeAM函数内部访问，外部的forEach循环根本拿不到这个变量。哪怕用var，只要是在函数内部声明，就不是全局的。

修复方案 #

方案1：将AM提升到全局作用域

在函数外部先声明AM，函数内部只赋值不重新声明：

var e = document.getElementById("UserTimeAM");
var AM; // 全局作用域声明AM
function onChangeAM() {
  AM = e.value; // 直接赋值，不写var
  var text = e.options[e.selectedIndex].text;
  console.log(AM, text);
}
e.onchangeAM = onChangeAM;
onChangeAM();

这样AM就变成全局变量，forEach循环里就能正常访问了。

方案2：封装作用域（更推荐）

如果不想污染全局变量，可以把相关逻辑封装在自执行函数里，让变量在局部作用域内共享：

(function() {
  var e = document.getElementById("UserTimeAM");
  var AM;
  
  function onChangeAM() {
    AM = e.value;
    var text = e.options[e.selectedIndex].text;
    console.log(AM, text);
  }
  
  e.onchangeAM = onChangeAM;
  onChangeAM();
  
  // 在这里调用API并处理forEach循环
  // 示例：
  // fetch('你的API地址')
  //   .then(res => res.json())
  //   .then(data => {
  //     const lowHigh = data.lowHigh;
  //     lowHigh.forEach(d => {
  //       let wDate = new Date(d.time).getUTCDate();
  //       let AM_Hour = AM;
  //       // 后续逻辑...
  //     });
  //   });
})();

这种方式既避免了全局变量污染，又能让相关逻辑共享AM变量。

另外注意：代码里用到的PM和i变量，也要确保它们的作用域可被forEach循环访问，否则同样会报错。

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