使用事件监听器捕获变量：下拉框值获取后变量为null问题

嘿，我看你遇到了个挺常见的小坑——逐行在控制台跑代码没问题，但放到函数里就拿不到值是吧？我来帮你一步步排查解决：

1. 先查最容易踩的坑：ID拼写是否一致 #

你JS里用的是document.getElementById("listSelector")，但你贴的HTML最后是<select id="listSelec...——这明显ID没写完啊！大概率是你实际HTML里的下拉框ID少了后面的tor？如果ID不匹配，getElementById肯定返回null，这是最常见的原因！

先确认你的HTML下拉框ID确实是listSelector，比如正确写法应该是：

<select id="listSelector">
  <option value="tesla">特斯拉</option>
  <option value="bmw">宝马</option>
</select>

2. 优化函数写法，直接从事件对象拿值（更可靠） #

其实完全不用再重新查找一次DOM元素，事件触发时会自带事件对象，直接从里面拿目标元素和值就行，既简洁又避免DOM查找的问题：

window.onload = function() {
  // 先提前拿到下拉框元素，顺便做个存在性检查，避免报错
  const listSelector = document.getElementById("listSelector");
  if (!listSelector) {
    console.error("哎哟，找不到ID为listSelector的下拉框哦！");
    return;
  }
  listSelector.addEventListener("change", findCarFunc);
  alert("页面加载完成啦");
}

function findCarFunc(event) {
  alert("你切换了选项！");
  // 直接从事件对象的target属性拿选中值和元素
  const eventValue = event.target.value;
  const listObj = event.target;
  // 这里可以打印出来看看，比alert直观
  console.log("当前选中的值：", eventValue);
  console.log("下拉框元素：", listObj);
}

3. 如果你是想在函数外部访问这些变量——那是作用域的问题！ #

你原来函数里的listObj和eventValue是函数内部的局部变量，函数执行完就销毁了，外部根本访问不到！如果需要在函数外面用这些值，得把变量声明在函数外部的作用域里：

// 把变量声明在全局（或者你需要的作用域）
let currentSelectedValue = null;
let dropdownElement = null;

window.onload = function() {
  const listSelector = document.getElementById("listSelector");
  if (!listSelector) {
    console.error("找不到下拉框！");
    return;
  }
  listSelector.addEventListener("change", findCarFunc);
  alert("页面加载完成");
}

function findCarFunc(event) {
  alert("你切换了选项");
  // 把值赋值给外部变量
  currentSelectedValue = event.target.value;
  dropdownElement = event.target;
  console.log("当前选中值：", currentSelectedValue);
}

这样你在函数外部也能拿到这两个变量的值了。

额外小提示：可以换成DOMContentLoaded代替window.onload #

window.onload要等所有资源（图片、样式表等）加载完才触发，有时候没必要，换成DOMContentLoaded的话，DOM一加载完就执行，更快：

document.addEventListener('DOMContentLoaded', function() {
  const listSelector = document.getElementById("listSelector");
  if (!listSelector) {
    console.error("找不到下拉框！");
    return;
  }
  listSelector.addEventListener("change", findCarFunc);
  alert("DOM加载完成");
});

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