這是我在這里的第一個問題，所以我有點緊張 ;) 我的問題是，如何將帶有選項的選擇器添加到 DOM。主要問題是我有 api 來獲取資料，并且應該從這個 api 添加選項的值。一開始我創建按鈕來啟動該功能，但隨后代碼不起作用。這是我的代碼：
const btn = document.createElement("button");
btn.setAttribute("id", "getCurrencies");
btn.innerHTML = "Click me!";
document.body.appendChild(btn);
btn.addEventListener("click", (e) => {
fetch("https://api.frankfurter.app/latest")
.then((response) => response.json)
.then((data) => {
const selectEL = createElement("select");
const currencies = Object.entries(data.rates).forEach(([code, value]) => {
const optionEl = createElement("option");
// optionEl.setAttribute("value", code);
optionEl.innerHTML = ($[code], $[value]);
selectEL.appendChild(optionEl);
});
document.body.appendChild(selectEL);
})
.catch((err) => console.log(err));
});
uj5u.com熱心網友回復：
你有很多錯誤。開始一段一段地除錯你的代碼。如果您首先查看控制臺，您將收到錯誤“ReferenceError: createElement is not defined”
- createElement 對 select 和 option 的呼叫不起作用，您在檔案中缺少創建它們的位置。document.createElement 的作業方式與第一行代碼類似。
然后你修復這些并得到下一個錯誤“型別錯誤：無法將未定義或空值轉換為物件”
- 您不是在呼叫 response.json()。它不會在不呼叫函式的情況下進行轉換。所以它會給出typeError。
然后你修復 json 呼叫。您現在將收到錯誤“ReferenceError: $ is not defined”這意味著 $ 未定義并且轉譯器不知道該怎么做。通過查看您的代碼：
- 你的innerHTML 集是錯誤的。您可以使用 es6 字串
optionEl.innerHTML =${code} - ${value};
現在它開始作業了。
- 我會將代碼拆分為函式，以便于閱讀。
所以從頭開始除錯。洗掉代碼行并閱讀控制臺為您列印的內容。
請參閱沒有代碼拆分的作業示例：https : //codepen.io/shnigi/pen/NWvNwXQ
uj5u.com熱心網友回復：
你應該這樣做：
$(document).on('click','#getCurrencies',function(){
// ...
});
這會將單擊事件系結到檔案及其中的所有子元素。此方法稱為委托事件處理。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/327699.html
標籤：javascript dom 获取 API
上一篇：如何遍歷嵌套的DOM樹
下一篇：使用JS制作井字游戲