Решил сделать свой конвертер валют.
Пока сделал наброски. У меня есть вот такая структура HTML:
<div class="container">
<div class="converterWrapper">
<h2 class="converterHeader">Convert the currencies!</h2>
<select id="firstCurrencySelector" class="currencySelector">
<option value="THB" id="THB" class="firstCurrency currency">THB — Thai
baht</option>
<option value="EUR" id="EUR" class="firstCurrency currency">EUR — Euro
</option>
<option value="USD" id="USD" class="firstCurrency currency">USD — USA
dollar</option>
<option value="CAD" id="CAD" class="firstCurrency currency">CAD —
Canadian
dollar</option>
<option value="HKD" id="HKD" class="firstCurrency currency">HKD — Hong
Kong
dollar</option>
...
<select id="secondCurrencySelector" class="currencySelector">
<option value="EUR" id="EUR" class="secondCurrency currency">EUR — Euro
</option>
<option value="THB" id="THB" class="secondCurrency currency">THB — Thai
baht</option>
<option value="USD" id="USD" class="secondCurrency currency">USD — USA
dollar</option>
<option value="CAD" id="CAD" class="secondCurrency currency">CAD —
Canadian
dollar</option>
<option value="HKD" id="HKD" class="secondCurrency currency">HKD — Hong
Kong
dollar</option>
...
<label id="convertResult"></label>
</div>
</div>
(Многоточием отмечены другие валюты).
Дальше я получаю курс при помощи JSON:
window.onload = function () {
const r = new XMLHttpRequest();
r.open('GET', 'https://api.exchangeratesapi.io/latest?base=THB'); // Открытие запроса
r.responseType = 'json';
r.send();
r.onload = function () {
if (r.status != 200) {
console.error(`Error: ${r.status}: ${r.statusText}.`);
} else {
currenciesEvents(r.response);
}
};
Затем мне нужно повесить Listener'ы на каждую валюту (пока писал, понял, что надо listener и на onchange input'а с кол-вом ставить):
let firstCurrency, secondCurrency, firstCurrencyCourse, secondCurrencyCourse;
function currenciesEvents(responseArray) {
const firstCurrencies = document.querySelectorAll('.firstCurrency');
const secondCurrencies = document.querySelectorAll('.secondCurrency');
firstCurrency = responseArray.rates.THB;
secondCurrency = responseArray.rates.EUR;
function returnFirstCurrencies(responseArray, i) {
firstCurrency = firstCurrencies[i].value;
firstCurrencyCourse = JSON.stringify(responseArray['rates'][`${firstCurrency}`]);
convertValues();
};
function returnSecondCurrencies(responseArray, i) {
secondCurrency = secondCurrencies[i].value;
secondCurrencyCourse = JSON.stringify(responseArray['rates'][`${secondCurrency}`]);
convertValues();
};
for (let i = 0; i < firstCurrencies.length; i++) {
firstCurrencies[i].addEventListener('click', returnFirstCurrencies(responseArray, i));
};
for (let i = 0; i < secondCurrencies.length; i++) {
secondCurrencies[i].addEventListener('click', returnSecondCurrencies(responseArray, i));
};
};
Потом я выполняю конвертацию и дописываю название полученной валюты
function convertValues() {
document.getElementById('convertResult').innerText = ((firstCurrencyCourse * secondCurrencyCourse) * document.getElementById('currencyQuantitySelector').value).toFixed(2) + ` ${secondCurrency}`;
};
};
Ошибок нет, всё хорошо, но почему-то код не выполняется при выборе валюты. Я повесил listener'ы на клик, но при нажатии на option с нужной валютой, итоговое значение не меняется.
Вопросы:
1. Почему так происходит?
2. Как упростить код, потому что понимаю, это можно было сделать гораздо проще?
