[ad_1]
ここでは、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."; } });
[ad_2]
コメント