如何修改空调价格计算器代码以适配下拉菜单的单位选项？

你的需求与问题 #

你是编程新手，正在开发空调价格计算器，现有代码默认使用米（Metres）单位的系数0.15计算，但需要支持英尺（Feets）单位（系数0.014），已添加ID为m_or_f的下拉菜单，但之前的尝试代码无法运行，同时需要实现未选择单位时的用户提示。

现有代码 #

var input1 = document.getElementById("inp1");
var input2 = document.getElementById("inp2");
var result = document.getElementById("coolculate");
function calculate() {
    var theProduct = parseInt(input1.value) * parseInt(input2.value) * (0.15);
    document.getElementById('invest_output_result').innerHTML = theProduct.toFixed(1);
};

result.onclick = calculate;

你尝试的代码（存在问题） #

if (Metres) {
 
  var theProduct = parseInt(input1.value) * parseInt(input2.value) * (0.15);
  document.getElementById('invest_output_result').innerHTML = theProduct.toFixed(1);

} else if (Feets) {

  var theProduct = parseInt(input1.value) * parseInt(input2.value) * (0.014);
  document.getElementById('invest_output_result').innerHTML = theProduct.toFixed(1);
} else {

  var theProduct = 0;
}

完整解决方案代码 #

JavaScript代码

// 提前获取所有需要用到的DOM元素
var inputLength = document.getElementById("inp1");
var inputWidth = document.getElementById("inp2");
var calculateBtn = document.getElementById("coolculate");
var unitSelector = document.getElementById("m_or_f");
var resultOutput = document.getElementById('invest_output_result');

function calculate() {
    // 解析输入的数值，转为整数
    var length = parseInt(inputLength.value);
    var width = parseInt(inputWidth.value);
    // 获取下拉菜单选中的单位值
    var selectedUnit = unitSelector.value;

    // 校验输入合法性
    if (isNaN(length) || isNaN(width)) {
        resultOutput.innerHTML = "请输入有效的数字";
        return;
    }
    if (!selectedUnit) {
        resultOutput.innerHTML = "请选择单位（米/英尺）";
        return;
    }

    // 根据选中单位选择对应系数
    var coefficient = selectedUnit === "metres" ? 0.15 : 0.014;
    var total = length * width * coefficient;

    // 输出保留一位小数的结果
    resultOutput.innerHTML = total.toFixed(1);
}

// 绑定按钮点击事件
calculateBtn.onclick = calculate;

配套的下拉菜单HTML（确保你的页面中是这个结构）

<select id="m_or_f">
    <option value="">请选择单位</option>
    <option value="metres">Metres（米）</option>
    <option value="feets">Feets（英尺）</option>
</select>

关键修改点说明 #

1. 正确获取下拉菜单值：不需要给每个选项加ID，直接通过下拉菜单的value属性获取选中项的值，这是下拉控件的标准用法。
2. 完善的校验逻辑：增加了输入数值有效性校验（判断是否为数字）和单位选择校验，给用户明确的提示信息。
3. 简化系数判断：用三元运算符替代冗余的if-else分支，代码更简洁易读。
4. 元素缓存：提前获取所有需要操作的DOM元素，避免重复调用getElementById，提升代码执行效率。

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