API实现货币转换问题：无法匹配货币与对应汇率值

问题根源 #

你的代码存在两个核心问题：

• 每次调用changeCurrency()都会重新请求API并重复生成所有<option>，且循环中持续给inputCurrency赋值，最终只会保留最后一个汇率值。
• 未将选中货币与对应汇率绑定，也没有实现基础的货币转换逻辑。

修复后的完整代码 #

HTML 部分

<div class="container">
    <div class="form">
        <div class="grid-container">
            <div class="currency-from">
                <input type="number" id="main-currency" value="1">
                <select id="mainCurrency">
                </select>
            </div>
            <div class="currency-to">
                <input type="number" id="target-currency" disabled>
                <select id="otherCurrency">
                </select>
            </div>
        </div>
        <br>
        <input type="number" id="rate-display" disabled placeholder="当前汇率">
    </div>
</div>

JavaScript 部分

const mainCurrencySelect = document.getElementById('mainCurrency');
const targetCurrencySelect = document.getElementById('otherCurrency');
const mainInput = document.getElementById('main-currency');
const targetInput = document.getElementById('target-currency');
const rateDisplay = document.getElementById('rate-display');
let exchangeRates = {};

// 初始化：请求汇率数据并渲染下拉选项
function initCurrencyData() {
    fetch(`https://open.er-api.com/v6/latest/USD`)
        .then(response => response.json())
        .then(data => {
            exchangeRates = data.rates;
            // 给两个下拉框添加所有货币选项
            renderCurrencyOptions(mainCurrencySelect);
            renderCurrencyOptions(targetCurrencySelect);
            // 默认选中USD和EUR
            mainCurrencySelect.value = 'USD';
            targetCurrencySelect.value = 'EUR';
            // 计算初始转换值
            calculateConversion();
        });
}

// 渲染货币下拉选项
function renderCurrencyOptions(selectElement) {
    selectElement.innerHTML = ''; // 清空原有选项
    for (const [currencyCode, rate] of Object.entries(exchangeRates)) {
        const option = document.createElement('option');
        option.value = currencyCode;
        option.textContent = currencyCode;
        selectElement.appendChild(option);
    }
}

// 计算货币转换
function calculateConversion() {
    const fromCurrency = mainCurrencySelect.value;
    const toCurrency = targetCurrencySelect.value;
    const amount = parseFloat(mainInput.value) || 1;

    // 计算汇率：从fromCurrency转toCurrency
    const fromRate = exchangeRates[fromCurrency];
    const toRate = exchangeRates[toCurrency];
    const exchangeRate = toRate / fromRate;
    
    rateDisplay.value = exchangeRate.toFixed(4);
    targetInput.value = (amount * exchangeRate).toFixed(2);
}

// 绑定事件监听
mainCurrencySelect.addEventListener('change', calculateConversion);
targetCurrencySelect.addEventListener('change', calculateConversion);
mainInput.addEventListener('input', calculateConversion);

// 页面加载时初始化
initCurrencyData();

关键改进点 #

• 缓存汇率数据：仅在页面加载时请求一次API，避免重复请求和重复生成选项。
• 分离渲染与计算逻辑：将选项渲染和转换计算拆分为独立函数，代码结构更清晰。
• 事件驱动转换：给下拉框和输入框绑定事件，实时响应操作并更新转换结果。
• 优化UI体验：添加汇率显示框，禁用目标输入框防止手动修改，提升交互合理性。

内容的提问来源于stack exchange，提问作者José Oliveira