无法通过提取 api 将带有选项的选择器添加到 DOM

Question

这是我的第一个问题，所以我有点紧张 ;) 我的问题是，如何将带有选项的选择器添加到 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));
});

Answer 1

你应该这样做：

$(document).on('click','#getCurrencies',function(){
 // ...
});

这会将单击事件绑定到文档及其中的所有子元素。此方法称为委托事件处理。

Answer 2

你有多个错误。开始逐段调试您的代码。如果您首先查看控制台，您将收到错误“ReferenceError: createElement is not defined”

createElement 调用 select 和选项将不起作用，您在文档中缺少创建它们的 WHERE。 document.createElement 与第一行代码中的工作方式相同。

然后你修复这些并得到下一个错误“TypeError：无法将 undefined 或 null 转换为对象”

您没有调用 response.json()。它不调用函数就不会进行转换。所以它会给出 typeError.

然后修复 json 调用。您现在将收到错误“ReferenceError: $ is not defined”，这意味着 $ 未定义并且转译器不知道该做什么。通过查看您的代码：

您的 innerHTML 设置有误。您可以使用 es6 字符串 optionEl.innerHTML = ${code} - ${value};

现在开始工作了。

我会把代码拆分成函数，这样更容易阅读。

所以从头开始调试。删除代码行并阅读控制台为您打印的内容。

查看没有代码拆分的工作示例：https://codepen.io/shnigi/pen/NWvNwXQ

无法通过提取 api 将带有选项的选择器添加到 DOM

Can't add selector with options to DOM with fetching api

javascript

dom

fetch-api