Как сделать конвертер валют?

Здравствуйте. Сразу скажу, я очень начинающий в JS. Сейчас в образовательных целях решил сделать свой конвертер валют.
Пока сделал наброски. У меня есть вот такая структура 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}`;
  };
};


Ошибок нет, всё хорошо, но почему-то код не выполняется при выборе валюты. Я повесил eventListener'ы на клик, но при нажатии на с нужной валютой, итоговое значение не меняется.
Вопросы:
1. Почему так происходит?
2. Как упростить код, потому что понимаю, это можно было сделать гораздо проще?
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
CEO iAmStudio, предприниматель.
1. Занеси код в CodePen, к примеру.
2. Суй логи (console.log).
3. Ты можешь использовать fetch для получения данных.
4. Проверяй типы (typeof) и попадания в функции.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы