Не получается подключить js файл с асинхроном

Вопрос-ответ JavaScript
1 
const apiUrl = "https://www.cbr-xml-daily.ru/daily_json.js";

const inputCurrency = document.getElementById("inputCurrency");
const currencyList = document.getElementById("currencyList");
const outputCurrency = document.getElementById("outputCurrency");

fetch(apiUrl)
  .then((response) => response.json())
  .then((data) => {
    const currencies = data.Valute;
    for (const [key, value] of Object.entries(currencies)) {
      const option = document.createElement("option");
      option.value = key;
      option.textContent = `${key} (${value.Name})`;
      currencyList.appendChild(option);
    }
  });

function convertCurrency() {
  const selectedCurrency = currencyList.value;
  if (inputCurrency.value !== "") {
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        const rate = data.Valute[selectedCurrency].Value;
        const inputAmount = parseFloat(inputCurrency.value);
        if (!isNaN(inputAmount)) {
          outputCurrency.value = (inputAmount * rate).toFixed(2);
        }
      });
  }
}

inputCurrency.addEventListener("input", convertCurrency);
currencyList.addEventListener("change", convertCurrency);

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Test</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/style.css" />
    <script src="src/index.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Конвертер валют</h1>
      <input id="inputCurrency" type="input"/>
      <select id="currencyList"></select>
      <input id="outputCurrency" type="input"/> ₽
    </div>
  </body>
</html>

Всем привет,
Пробую сделать конвертер валют
Вроде на sandbox’e всё работает и получается, но в vs code совсем не хочет откликаться
Пробывал понять в чём проблем, но не нахожу причину

Так же ещё хочется спросить
Как сделать так, чтобы код умел сохранять текущую выбранную валюту. Т.е. если пользователь последний раз конвертировал египетские фунты, то при открытии приложения в селекте по умолчанию должны быть выбраны именно они.

Прошу помочь

Спасибо огромное заранее

2

Фишка в том что js код выполняется синхронно, последовательно. Иными словами подключенному js коду доступны те узлы DOM которые определены до подключаемого скрипта.

В разметке скрипт подключается в head, и не видит ни одного элемента из body.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Test</title>
    <meta charset="UTF-8" />
    <!-- <link rel="stylesheet" href="src/style.css" /> -->
    <script src="js.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Конвертер валют</h1>
      <input id="inputCurrency" type="input"/>
      <select id="currencyList"></select>
      <input id="outputCurrency" type="input"/> ₽
    </div>
  </body>
</html>

Во время выполнения js кода html из body еще не распаршен, и следовательно document.getElementById("inputCurrency") вычисляется в null. Отсюда и сообщения ошибок которые говорят что-то вроде “Не могу сделать с null то что ты просишь меня сделать”.

image
image1222×96 16.4 KB

Вообще обращай внимание на наличие и тип ошибок. Они далеко не всегда информативны, но научиться с ними работать можно и нужно.

Хорошее решение использовать аттрибут defer на скрипте. Аттрибут сделатет так чтобы скрипт выполнился уже после полного создания DOM по загрузке страницы.

<script defer src="js.js"></script>

Как сделать так, чтобы код умел сохранять текущую выбранную валюту.

Нужно реализовать логику формата. Пошагово не получится понять, нужно понять все решение целиком:

  1. Проверить есть ли в localstorage выбранная валюта, если есть то восстановить инпут с выбранной валютой. Если значения в localstorage нет, то восстановить значение валюты по умолчанию.
  2. На каждый выбор валюты записывать выбраунную валюту в localstorage.
1 лайк