尝试在"button click"上运行脚本，然后查询货币兑换 API

Question

我正试图编写一些JS，从页面上其他地方的下拉框中抓取选定字段(这些字段与下面脚本中的国家名称相同)。

然后我想让它运行，一旦"计算"按钮作为表单的一部分已被单击。以下是我添加的自定义代码，我在运行时遇到了麻烦:

<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>

我希望脚本返回所讨论的2个货币代码的实时货币交换数据。

还有一点信息，我使用了"else if"部分，将国家名称与货币代码配对。

提前感谢您的帮助!

Answer 1

XMLHTTPRequest是异步的，您试图在响应完成之前显示它

改变这

request.onload = function() {
var response = request.response;
console.log(response);
}
document.getElementById("rates").innerHTML = response.result;

request.onload = function() {
var response = request.response;
console.log(response);
document.getElementById("rates").innerHTML = response.result;
}