【解決方法】htmlformelement でフェッチできませんでした

ここでは、fastforex.io api を使用してお金の換算計算機を作成しようとしています。しかし、結果は表示されません。コンソールを確認すると、次のように表示されます。 HTMLFormElement でフェッチできませんでした

私が試したこと：

HTML

<body>
  <h1>Money Conversion Calculator</h1>
  <form id="conversion-form">
    <label>Enter an amount:</label>
    <input type="number" id="amount" />
    <br />
    <label>From:</label>
    <select id="from-currency">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
    </select>
    <br />
    <label>To:</label>
    <select id="to-currency">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
    </select>
    <br />
    <button type="submit">Convert</button>
  </form>
  <p id="result"></p>
</body>

JavaScript

const form = document.getElementById("conversion-form");
const amountInput = document.getElementById("amount");
const fromCurrencyInput = document.getElementById("from-currency");
const toCurrencyInput = document.getElementById("to-currency");
const resultElement = document.getElementById("result");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const amount = amountInput.value;
  const fromCurrency = fromCurrencyInput.value;
  const toCurrency = toCurrencyInput.value;

  const response = await fetch(
    `https://api.fastforex.io/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}&api_key=xxxxxxxxxxx`
  ); // api key omitted on purpose 
  const data = await response.json();
  const result = data.result;

  resultElement.innerText = `${amount} ${fromCurrency} is equal to ${result} ${toCurrency}`;
});

解決策 2

あなたが提供したコードにはいくつかの問題があります：

API リクエストの送信に使用されるフェッチ関数は非同期です。つまり、フェッチ呼び出しの後のコードは、リクエストが完了する前に実行されます。これは、データ変数が結果プロパティの抽出に使用されるときに、値が割り当てられていないことを意味します。これを修正するには、次のように、データ変数を使用するコードを fetch 関数の then ブロック内に移動する必要があります。

JavaScript

const response = await fetch(
  `https://api.fastforex.io/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}&api_key=xxxxxxxxxxx`
);
response.json().then((data) => {
  const result = data.result;
  resultElement.innerText = `${amount} ${fromCurrency} is equal to ${result} ${toCurrency}`;
});

fetch 関数は、ネットワークエラーや API サーバーの問題など、要求にエラーがある場合に例外をスローできます。これらの例外を処理するには、フェッチ呼び出しを try-catch ブロックでラップする必要があります。

コンソールに表示される Failed to fetch エラーは、リクエストの送信に使用している URL の問題が原因である可能性があります。 URL が正しいことと、使用している API キーが有効であることを確認してください。

これらの変更が適用された改訂コードは次のとおりです。

const form = document.getElementById("conversion-form");
const amountInput = document.getElementById("amount");
const fromCurrencyInput = document.getElementById("from-currency");
const toCurrencyInput = document.getElementById("to-currency");
const resultElement = document.getElementById("result");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const amount = amountInput.value;
  const fromCurrency = fromCurrencyInput.value;
  const toCurrency = toCurrencyInput.value;

  try {
    const response = await fetch(
      `https://api.fastforex.io/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}&api_key=xxxxxxxxxxx`
    );
    response.json().then((data) => {
      const result = data.result;
      resultElement.innerText = `${amount} ${fromCurrency} is equal to ${result} ${toCurrency}`;
    });
  } catch (error) {
    console.error(error);
    resultElement.innerText = "An error occurred. Please try again later.";
  }
});