两个相似的blur()调用一个生效一个失效，求排查原因

调用了两个结构几乎一致的blur()函数，仅关联的ID名称不同（lighting-upgrade和hvac-upgrade），但前者正常运行，后者抛出错误，无法定位原因。

相关代码片段 #

HTML代码 #

<select id="lighting-upgrade" name="lighting">
  <optgroup>
    <option value="option1">Incandescent</option>
    <option value="option2">Fluorescent</option>
  <optgroup>
</select>
<input id="insulation-cost" type="number" name="insulation-cost">

<select id="hvac-upgrade" name="hvac">
  <optgroup>
    <option value="option1">RTU-80-Furnace</option>
    <option value="option2">RTU-92-Furnace</option>
  <optgroup>
</select>
<input id="lighting-cost" type="number" name="lighting-cost">

定义的常量 #

const lighting_upgrade = {
    option1: {type:"Incandescent", savings:0.1},
    option2: {type:"Fluorescent", savings:0.21}
};
const hvac_upgrade = {
  option1: {type:"RTU-80-Furnace", savings:0.1},
  option2: {type:"RTU-92-Furnace", savings:0.18}
};

JavaScript调用代码 #

正常工作的调用

$("#lighting-cost").blur(function() {
    var option_selected  = $("#lighting-upgrade option:selected").val();
    var percent_savings  = lighting_upgrade[option_selected].savings;
});

失效的调用

$("#hvac-cost").blur(function() {
    var option_selected  = $("#hvac-upgrade option:selected").val();
    var percent_savings  = hvac_upgrade[option_selected].savings; 
});

错误信息 #

tool.js:155 Uncaught TypeError: Cannot read properties of undefined (reading 'savings')
    at HTMLInputElement.<anonymous>

可复现代码 #

const lighting_upgrade = {
    option1: {type:"Incandescent", savings:0.1},
    option2: {type:"Fluorescent", savings:0.21}
};

const hvac_upgrade = {
  option1: {type:"RTU-80-Furnace", savings:0.1},
  option2: {type:"RTU-92-Furnace", savings:0.18}
};

$(function() {
  $("#lighting-cost").blur(function() {
    var option_selected  = 
    $("#lighting-upgrade option:selected").val();
    var percent_savings  =
    lighting_upgrade[option_selected].savings;
    $("#result1").text(percent_savings);
  });
  
  $("#hvac-cost").blur(function() {
    var option_selected  = 
    $("#hvac-upgrade option:selected").val();
    var percent_savings  =
    hvac_upgrade[option_selected].savings;
    $("#result2").text(percent_savings);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span>Lighting:</span>
<select id="lighting-upgrade" name="lighting">
  <optgroup>
    <option value=""></option>
    <option value="option1">Incandescent</option>
    <option value="option2">Fluorescent</option>
  <optgroup>
</select>
<input id="insulation-cost" type="number" name="insulation-cost">
<div id="result1">Lighting Result</div>
</div>
<div>
<span>HVAC:</span>
<select id="hvac-upgrade" name="hvac">
  <optgroup>
    <option value=""></option>
    <option value="option1">RTU-80-Furnace</option>
    <option value="option2">RTU-92-Furnace</option>
  <optgroup>
</select>
<input id="lighting-cost" type="number" name="lighting-cost">
<div id="result2">HVAC Result</div>
</div>

问题原因及修复 #

核心问题1：输入框ID不匹配 #

JS中给#hvac-cost绑定了blur事件，但HTML里对应的输入框ID是lighting-cost，不存在hvac-cost这个元素，导致事件根本没绑定到正确的输入框上。

核心问题2：空选项值导致报错 #

当select的默认选项值为空字符串时，hvac_upgrade[""]返回undefined，再访问.savings就会抛出Cannot read properties of undefined的错误。

修复步骤 #

1. 修正输入框ID：将HTML中HVAC部分的输入框ID改为hvac-cost，让JS事件绑定到正确元素：

<!-- 修改前 -->
<input id="lighting-cost" type="number" name="lighting-cost">
<!-- 修改后 -->
<input id="hvac-cost" type="number" name="hvac-cost">

2. 处理空选项的情况：获取savings前先判断选项值是否有效，避免报错：

$("#hvac-cost").blur(function() {
    var option_selected  = $("#hvac-upgrade option:selected").val();
    // 先检查选项是否存在
    if (option_selected && hvac_upgrade[option_selected]) {
        var percent_savings  = hvac_upgrade[option_selected].savings;
        $("#result2").text(percent_savings);
    } else {
        // 可选：提示用户选择有效选项
        $("#result2").text("请选择有效的HVAC选项");
    }
});

3. 可选优化：给select设置默认选中的有效选项，或移除空选项，从根源避免空值问题：

<select id="hvac-upgrade" name="hvac">
  <optgroup>
    <option value="option1" selected>RTU-80-Furnace</option>
    <option value="option2">RTU-92-Furnace</option>
  <optgroup>
</select>

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