onchange事件赋值后变量先返回值再变undefined并报错问题

错误根源 #

你踩了一个新手常犯的变量复用坑：
一开始let a = document.getElementById('CAL');把下拉框的DOM元素存在了变量a里，但在onchange事件里，你写了a = a.value——这直接把a从DOM元素改成了字符串类型的选中值：

• 第一次触发事件时，a还是DOM元素，能正常取到value，此时a变成了类似"low"的字符串
• 第二次触发时，a已经是字符串了，字符串没有value属性，所以a.value返回undefined，a被赋值为undefined
• 第三次触发时，a是undefined，访问undefined.value自然就抛出了你看到的TypeError

修复后的代码 #

把存储DOM元素和存储选中值的变量分开，不要混用：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Perio Staging and Grading</title>
</head>
<body>
        <h2>Severity (Site of greater loss)</h2>
            <div><label for="CAL">Clinical attachment level:</label>
                <select name="CAL" id="CAL" >
                    <option value="">--Interdental CAL--</option>
                    <option value="low">1-2mm</option>
                    <option value="medium">3-4mm</option>
                    <option value="high">&#62;5mm</option>
                    <option value="naCal" >Not available</option>
                </select>
            </div>
    </div>
    <button id="debug">Submit</button>
    <div id="result">

    </div>

    <script>
    // 专门存下拉框DOM元素
    const calSelect = document.getElementById('CAL');
    // 专门存选中的值
    let calValue;
    calSelect.onchange = (ev) =>{
      calValue = calSelect.value;
      // 可以打印看看效果
      console.log('当前选中值:', calValue);
    }
    </script>
</body>

额外优化小技巧 #

用addEventListener绑定事件比直接赋值onchange更灵活，还能通过事件对象直接获取触发元素：

calSelect.addEventListener('change', (ev) => {
  calValue = ev.target.value;
  console.log('当前选中值:', calValue);
});

这种写法不需要依赖外部的DOM变量，逻辑更独立。

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