[ad_1]
両替計算機を作成しようとしています。 しかし、結果は NaN を示しています。
私が試したこと：
Here's the code <pre lang="HTML"> <pre><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://www.codeproject.com/Questions/5351473/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- FontAweome CDN Link for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <div class="wrapper"> <header>Convert Currency</header> <form action="#"> <div class="amount"> <p>Enter Amount</p> <input type="text" value="1"> </div> <div class="drop-list"> <div class="from"> <p>From</p> <div class="select-box"> <img src="https://flagcdn.com/48x36/us.png" alt="flag"> <select> <!-- Options tag are inserted from JavaScript --> </select> </div> </div> <div class="icon"></div> <div class="to"> <p>To</p> <div class="select-box"> <img src="https://flagcdn.com/48x36/np.png" alt="flag"> <select> <!-- Options tag are inserted from JavaScript --> </select> </div> </div> </div> <div class="exchange-rate">Getting exchange rate...</div> <button>Show Result</button> </form> </div> <script src="js/country-list.js"></script> <script src="js/script.js"></script> </body>
JavaScript
let country_list = { "AED" : "AE", "AFN" : "AF", "XCD" : "AG", "ALL" : "AL", "AMD" : "AM", "ANG" : "AN", "AOA" : "AO", "AQD" : "AQ", "ARS" : "AR", "AUD" : "AU", "AZN" : "AZ", "BAM" : "BA", "BBD" : "BB", "BDT" : "BD", "XOF" : "BE", "BGN" : "BG", "BHD" : "BH", "BIF" : "BI", "BMD" : "BM", "BND" : "BN", "BOB" : "BO", "BRL" : "BR", "BSD" : "BS", "NOK" : "BV", "BWP" : "BW", "BYR" : "BY", "BZD" : "BZ", "CAD" : "CA", "CDF" : "CD", "XAF" : "CF", "CHF" : "CH", "CLP" : "CL", "CNY" : "CN", "COP" : "CO", "CRC" : "CR", "CUP" : "CU", "CVE" : "CV", "CYP" : "CY", "CZK" : "CZ", "DJF" : "DJ", "DKK" : "DK", "DOP" : "DO", "DZD" : "DZ", "ECS" : "EC", "EEK" : "EE", "EGP" : "EG", "ETB" : "ET", "EUR" : "FR", "FJD" : "FJ", "FKP" : "FK", "GBP" : "GB", "GEL" : "GE", "GGP" : "GG", "GHS" : "GH", "GIP" : "GI", "GMD" : "GM", "GNF" : "GN", "GTQ" : "GT", "GYD" : "GY", "HKD" : "HK", "HNL" : "HN", "HRK" : "HR", "HTG" : "HT", "HUF" : "HU", "IDR" : "ID", "ILS" : "IL", "INR" : "IN", "IQD" : "IQ", "IRR" : "IR", "ISK" : "IS", "JMD" : "JM", "JOD" : "JO", "JPY" : "JP", "KES" : "KE", "KGS" : "KG", "KHR" : "KH", "KMF" : "KM", "KPW" : "KP", "KRW" : "KR", "KWD" : "KW", "KYD" : "KY", "KZT" : "KZ", "LAK" : "LA", "LBP" : "LB", "LKR" : "LK", "LRD" : "LR", "LSL" : "LS", "LTL" : "LT", "LVL" : "LV", "LYD" : "LY", "MAD" : "MA", "MDL" : "MD", "MGA" : "MG", "MKD" : "MK", "MMK" : "MM", "MNT" : "MN", "MOP" : "MO", "MRO" : "MR", "MTL" : "MT", "MUR" : "MU", "MVR" : "MV", "MWK" : "MW", "MXN" : "MX", "MYR" : "MY", "MZN" : "MZ", "NAD" : "NA", "XPF" : "NC", "NGN" : "NG", "NIO" : "NI", "NPR" : "NP", "NZD" : "NZ", "OMR" : "OM", "PAB" : "PA", "PEN" : "PE", "PGK" : "PG", "PHP" : "PH", "PKR" : "PK", "PLN" : "PL", "PYG" : "PY", "QAR" : "QA", "RON" : "RO", "RSD" : "RS", "RUB" : "RU", "RWF" : "RW", "SAR" : "SA", "SBD" : "SB", "SCR" : "SC", "SDG" : "SD", "SEK" : "SE", "SGD" : "SG", "SKK" : "SK", "SLL" : "SL", "SOS" : "SO", "SRD" : "SR", "STD" : "ST", "SVC" : "SV", "SYP" : "SY", "SZL" : "SZ", "THB" : "TH", "TJS" : "TJ", "TMT" : "TM", "TND" : "TN", "TOP" : "TO", "TRY" : "TR", "TTD" : "TT", "TWD" : "TW", "TZS" : "TZ", "UAH" : "UA", "UGX" : "UG", "USD" : "US", "UYU" : "UY", "UZS" : "UZ", "VEF" : "VE", "VND" : "VN", "VUV" : "VU", "YER" : "YE", "ZAR" : "ZA", "ZMK" : "ZM", "ZWD" : "ZW" } const dropList = document.querySelectorAll("form select"), fromCurrency = document.querySelector(".from select"), toCurrency = document.querySelector(".to select"), getButton = document.querySelector("form button"); for (let i = 0; i < dropList.length; i++) { for(let currency_code in country_list){ let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "NPR" ? "selected" : ""; let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`; dropList[i].insertAdjacentHTML("beforeend", optionTag); } dropList[i].addEventListener("change", e =>{ loadFlag(e.target); }); } function loadFlag(element){ for(let code in country_list){ if(code == element.value){ let imgTag = element.parentElement.querySelector("img"); imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`; } } } window.addEventListener("load", ()=>{ getExchangeRate(); }); getButton.addEventListener("click", e =>{ e.preventDefault(); getExchangeRate(); }); const exchangeIcon = document.querySelector("form .icon"); exchangeIcon.addEventListener("click", ()=>{ let tempCode = fromCurrency.value; fromCurrency.value = toCurrency.value; toCurrency.value = tempCode; loadFlag(fromCurrency); loadFlag(toCurrency); getExchangeRate(); }) function getExchangeRate(){ const amount = document.querySelector("form input"); const exchangeRateTxt = document.querySelector("form .exchange-rate"); let amountVal = amount.value; amountVal = parseFloat(amountVal); if(amountVal == "" || amountVal == "0"){ amount.value = "1"; amountVal = 1; } exchangeRateTxt.innerText = "Getting exchange rate..."; let url = `https://api.fastforex.io/convert?from=${fromCurrency.value}&to=${toCurrency.value}&amount=${amountVal}&api_key=xxxx-xxxxx-xxxxx`; //api key on purpose fetch(url).then(response => response.json()).then(result =>{ let exchangeRate = result.rate; let totalExRate = (amountVal * exchangeRate).toFixed(2); exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`; }).catch(() =>{ exchangeRateTxt.innerText = "Something went wrong"; }); }
応答データ:
{
“ベース”: “AED”,
「金額」：1、
“結果”： {
「米ドル」: 0.27、
「レート」: 0.27234
}、
「ミリ秒」: 5
}
解決策 1
誰もコードを実行できないため、問題の原因を特定することはできません。
この「NaN」がどこに現れているかもわかりません。 ページの出力にありますか？ エラーをスローしていますか？
“Nan” は、0 で除算するなど、無意味な結果を生成する数学演算の結果です。この値がコードの出力に含まれている場合は、コードを逆方向にトレースする必要があります。その出力を生成したコードに返されます。
作成中の API 呼び出しのデータに Nan が含まれている場合、それを記述した場合はサービスをデバッグする必要があります。 そうでない場合は、サービスのベンダーに連絡して問題を解決する必要があります。
[ad_2]
コメント