JS+HTML下拉选学生名弹出对应成绩alert弹窗失效问题求助

存在的代码问题 #

• DOM获取时序错误：如果JS脚本的加载位置在<select>标签之前，页面解析执行JS时根本还没生成id为students的下拉框节点，document.getElementById('students')会返回null，后续对null调用addEventListener方法会直接触发报错，中断所有JS执行逻辑。
• 变量名拼写错误：你定义的成绩映射变量为GradeMap，但在事件回调的alert语句里误写为jGradeMap，该变量从未被声明，即使前面的事件绑定正常执行，用户触发下拉框切换时也会因为引用未定义变量抛出错误，弹窗无法弹出。
• 不规范的全局变量声明：创建GradeMap时未使用const/let关键字声明，变量会被挂载到全局window对象上，长期来看容易引发命名冲突类的隐蔽bug。

可正常运行的修复代码 #

将原JS逻辑调整为DOM加载完成后再执行，并修正变量名、规范声明后，代码如下：

// 确保所有DOM节点解析完成后再执行绑定逻辑
document.addEventListener('DOMContentLoaded', () => {
  const GradeMap = new Map();
  GradeMap.set("Peter", 55);
  GradeMap.set("Chris", 60);
  GradeMap.set("Liz", 70);
  GradeMap.set("Jim", 65);
  GradeMap.set("Stacey", 85);

  const selectEl = document.getElementById('students');
  selectEl.addEventListener('change', () => {
    const selectedName = selectEl.value;
    alert(`Name: ${selectedName}, Score: ${GradeMap.get(selectedName)}`);
  });
});

配套的HTML代码无需修改：

<select id="students">
  <option disabled selected>Select Name for score</option>
  <option value="Peter">Peter</option>
  <option value="Chris">Chris</option>
  <option value="Liz">Liz</option>
  <option value="Jim">Jim</option>
  <option value="Stacey">Stacey</option>
</select>

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