JavaScript中选项值变更时无法获取对应结果的问题

你的代码核心问题是：只在页面加载时获取了一次下拉框的选中值，之后切换选项时没有重新计算汇率，所以后续的计算一直用的是初始汇率，结果自然不会变。

修改后的代码 #

let cantidad1 = document.getElementById("cantidad");
let monedaSelect = document.getElementById("cambio");
let resultado1 = document.getElementById("resultado");

// 统一处理计算逻辑
function calcularResultado() {
    // 每次计算都获取最新的选中币种
    let moneda1 = monedaSelect.value;
    let tipodemoneda;
    
    // 根据选中的币种更新汇率
    if (moneda1 === "cup") {
        tipodemoneda = 97;
    } else if (moneda1 === "mlc") {
        tipodemoneda = 0.89;
    } else {
        tipodemoneda = 0; // 未匹配到选项时的默认值
    }

    // 计算结果，同时校验输入的数量是否有效
    let cantidadValor = parseFloat(cantidad1.value);
    resultado1.value = !isNaN(cantidadValor) ? tipodemoneda * cantidadValor : "";
}

// 给数量输入框绑定事件
cantidad1.addEventListener("change", calcularResultado);
// 给下拉框绑定事件，切换时触发计算
monedaSelect.addEventListener("change", calcularResultado);

// 页面加载完成后先执行一次计算（可选）
calcularResultado();

关键修改点 #

• 把计算逻辑抽成独立函数，每次需要计算时都会重新获取当前下拉框的选中值，确保用最新的汇率
• 给下拉框添加change事件监听，切换选项时自动触发计算
• 修复了原代码中tipodemoneda未声明导致的全局变量问题
• 增加了输入有效性校验，避免非数字输入产生NaN结果

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