我调用了两个非常相似的blur()
函数,其中一个可以工作,另一个不能工作。这两个调用之间的唯一区别是id
的名称。一个名为lighting-upgrade,一个名为hvac-upgrade。我看不出id=lighting-upgrade
工作而id=hvac-upgrade
不工作的原因。
HTML中的<select>
:
<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;
使用console.log
,这是我得到的错误:
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条答案
按热度按时间nsc4cvqm1#
你的代码是工作,但你搞砸了你的HTML中的元素的id。以下是更新的片段: