I'm trying to write some JS that grabs the selected field from a dropdown box elsewhere on the page (these fields are the same as the country names in the script below).
I then want it to run, once the "calculate" button as part of the form has been clicked. Here is the custom code I am adding in that I am having trouble running:
<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>
I would like the script to return the live currency exchange data for the 2 currency codes in question.
One more bit of info, I'm using my "else if" section of the code, to pair country names with currency codes.
Thanks in advance for your help!
The XMLHTTPRequest is asynchronous, and you are trying to display it before the response has finished
Change this
request.onload = function() {
var response = request.response;
console.log(response);
}
document.getElementById("rates").innerHTML = response.result;
To this
request.onload = function() {
var response = request.response;
console.log(response);
document.getElementById("rates").innerHTML = response.result;
}