esta es mi primera pregunta aquí, así que estoy un poco nervioso;) Mi problema es cómo agregar un selector con opciones a DOM. La pregunta principal es que tengo una API para obtener datos y el valor de las opciones debe agregarse desde esta API. Al principio, creo un botón para iniciar la función, pero luego el código no funciona. Aquí está mi código:
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)); });Tienes varios errores. Comience a depurar su código pieza por pieza. Si primero observa la consola, obtendrá el error "ReferenceError: createElement no está definido"
Luego los corrige y obtienes el siguiente error "Error de tipo: no se puede convertir indefinido o nulo en objeto"
Luego arreglas la llamada json. Ahora obtendrá el error "ReferenceError: $ no está definido". Esto significa que $ no está definido y el transpilador no tiene idea de qué hacer. Mirando tu código:
optionEl.innerHTML = ${code} - ${value} ;Ahora empieza a funcionar.
Así que empieza por depurar desde el principio. Elimine las líneas de código y lea lo que la consola imprime por usted.
Ver ejemplo de trabajo sin división de código: https://codepen.io/shnigi/pen/NWvNwXQ
Deberías hacerlo así:
$(document).on('click','#getCurrencies',function(){ // ... });Esto vincula un evento de clic al documento y todos los elementos secundarios dentro de él. Este método se conoce como gestión delegada de eventos.