You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

点击按钮调用汇率API获取对应国家汇率的JS代码求助

avatar
架构老林
2026-8-6
问题排查：汇率计算JavaScript代码无法运行

需求是点击表单的「calculate」按钮（id为country_currency_form_button）时：

  • 获取下拉框（id为select_country2）选中的国家名称
  • 通过匹配逻辑将国家名转为对应货币代码
  • 调用汇率API获取美元（USD）与目标货币的实时汇率，显示在id为rates的<p>标签中

但当前代码无法正常运行，原代码如下：

<p>The exchange rate is: </p>
<p id="rates"></p>

<script>
document.getElementById('country_currency_form_button').onclick = function() {
var country2select = document.getElementById("select_country2");
var countryCheck = country2select.options[country2select.selectedIndex].text;
}
var countryCheckCurrency;
//check country name and assign currency code

if (countryCheck === "Albania") {
countryCheckCurrency = "LEK";
}

else if (countryCheck === "Andorra") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Austria") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Belarus") {
countryCheckCurrency = "BYN";
}

else if (countryCheck === "Belgium") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Bosnia and Herzegovina") {
countryCheckCurrency = "BAM";
}

else if (countryCheck === "Bulgaria") {
countryCheckCurrency = "BGN";
}

else if (countryCheck === "Croatia") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Czech Republilc") {
countryCheckCurrency = "CZK";
}

else if (countryCheck === "Denmark") {
countryCheckCurrency = "DKK";
}

else if (countryCheck === "Estonia") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Finland") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "France") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Germany") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Greece") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Hungary") {
countryCheckCurrency = "HUF";
}

else if (countryCheck === "Iceland") {
countryCheckCurrency = "ISK";
}

else if (countryCheck === "Ireland") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Italy") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Latvia") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Liechtenstein") {
countryCheckCurrency = "CHF";
}

else if (countryCheck === "Lithuania") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Luxembourg") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Malta") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Moldova") {
countryCheckCurrency = "MDL";
}

else if (countryCheck === "Monaco") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Montenegro") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Netherlands") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "North Macedonia") {
countryCheckCurrency = "MKD";
}

else if (countryCheck === "Norway") {
countryCheckCurrency = "NOK";
}

else if (countryCheck === "Poland") {
countryCheckCurrency = "PLN";
}

else if (countryCheck === "Portugal") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Romania") {
countryCheckCurrency = "RON";
}

else if (countryCheck === "San Marino") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Serbia") {
countryCheckCurrency = "RSD";
}

else if (countryCheck === "Slovakia") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Slovenia") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Spain") {
countryCheckCurrency = "EUR";
}

else if (countryCheck === "Sweden") {
countryCheckCurrency = "SEK";
}

else if (countryCheck === "Switzerland") {
countryCheckCurrency = "CHF";
}

else if (countryCheck === "Ukraine") {
countryCheckCurrency = "UAH";
}

else if (countryCheck === "United Kingdom") {
countryCheckCurrency = "GBP";
}

//if the country is anything else
else {
  countryCheckCurrency = "UNKNOWN";
}

let w = "USD";
let x = countryCheckCurrency;
//now we do the API request
var requestURL = 'https://api.exchangerate.host/convert?from=' + w + "&to=" + x;
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var response = request.response;
console.log(response);
}
//and display the rate in the relevant paragraph
document.getElementById("rates").innerHTML = response.result;
</script>

问题分析

  1. 变量作用域错误：countryCheck定义在点击事件的回调函数内部，外部的匹配逻辑无法访问该变量，导致countryCheckCurrency始终是undefined或UNKNOWN。
  2. 异步请求处理错误：XMLHttpRequest是异步操作，在调用request.send()后直接执行document.getElementById("rates").innerHTML = response.result时，API响应还未返回，response未定义会报错。
  3. 拼写错误：代码中Czech Republilc多写了一个l，应该是Czech Republic，会导致捷克的货币代码匹配失败。
  4. 未处理无效货币情况：如果匹配到UNKNOWN货币，调用API会返回错误，没有对应的错误处理逻辑。

修复后的代码 

<p>The exchange rate is: </p>
<p id="rates"></p>

<script>
document.getElementById('country_currency_form_button').onclick = function() {
    const country2select = document.getElementById("select_country2");
    const countryCheck = country2select.options[country2select.selectedIndex].text;
    let countryCheckCurrency;

    // 国家-货币匹配逻辑
    if (countryCheck === "Albania") {
        countryCheckCurrency = "LEK";
    } else if (countryCheck === "Andorra") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Austria") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Belarus") {
        countryCheckCurrency = "BYN";
    } else if (countryCheck === "Belgium") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Bosnia and Herzegovina") {
        countryCheckCurrency = "BAM";
    } else if (countryCheck === "Bulgaria") {
        countryCheckCurrency = "BGN";
    } else if (countryCheck === "Croatia") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Czech Republic") { // 修正拼写错误
        countryCheckCurrency = "CZK";
    } else if (countryCheck === "Denmark") {
        countryCheckCurrency = "DKK";
    } else if (countryCheck === "Estonia") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Finland") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "France") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Germany") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Greece") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Hungary") {
        countryCheckCurrency = "HUF";
    } else if (countryCheck === "Iceland") {
        countryCheckCurrency = "ISK";
    } else if (countryCheck === "Ireland") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Italy") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Latvia") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Liechtenstein") {
        countryCheckCurrency = "CHF";
    } else if (countryCheck === "Lithuania") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Luxembourg") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Malta") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Moldova") {
        countryCheckCurrency = "MDL";
    } else if (countryCheck === "Monaco") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Montenegro") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Netherlands") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "North Macedonia") {
        countryCheckCurrency = "MKD";
    } else if (countryCheck === "Norway") {
        countryCheckCurrency = "NOK";
    } else if (countryCheck === "Poland") {
        countryCheckCurrency = "PLN";
    } else if (countryCheck === "Portugal") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Romania") {
        countryCheckCurrency = "RON";
    } else if (countryCheck === "San Marino") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Serbia") {
        countryCheckCurrency = "RSD";
    } else if (countryCheck === "Slovakia") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Slovenia") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Spain") {
        countryCheckCurrency = "EUR";
    } else if (countryCheck === "Sweden") {
        countryCheckCurrency = "SEK";
    } else if (countryCheck === "Switzerland") {
        countryCheckCurrency = "CHF";
    } else if (countryCheck === "Ukraine") {
        countryCheckCurrency = "UAH";
    } else if (countryCheck === "United Kingdom") {
        countryCheckCurrency = "GBP";
    } else {
        countryCheckCurrency = "UNKNOWN";
    }

    const ratesElement = document.getElementById("rates");
    // 处理无效货币情况
    if (countryCheckCurrency === "UNKNOWN") {
        ratesElement.innerHTML = "无法识别该国家的货币";
        return;
    }

    // 发起API请求
    const requestURL = `https://api.exchangerate.host/convert?from=USD&to=${countryCheckCurrency}`;
    const request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    
    request.onload = function() {
        if (request.status >= 200 && request.status < 300) {
            const response = request.response;
            if (response.success) {
                ratesElement.innerHTML = `${response.result.toFixed(4)} ${countryCheckCurrency}`;
            } else {
                ratesElement.innerHTML = "获取汇率失败：" + response.error.info;
            }
        } else {
            ratesElement.innerHTML = "请求失败，请稍后重试";
        }
    };

    request.onerror = function() {
        ratesElement.innerHTML = "网络错误，无法连接到汇率服务器";
    };

    request.send();
};
</script>

修复说明

  • 将所有逻辑移至点击事件回调内部，解决变量作用域问题
  • 把DOM更新逻辑放到request.onload回调中，确保在API响应返回后再更新内容
  • 修正了捷克的国家名称拼写错误
  • 添加了无效货币、API请求失败、网络错误的处理逻辑，提升用户体验

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.06 00:20:28