No se donde está el problema. Al poner el fetch en una FUNCION me arroja el error TypeError: NetworkError when attempting to fetch resource pero si lo pongo por fuera se ejecuta correctamente. ¿porque sucede esto? ¿Qué estoy haciendo mal?
Dejo el código para que vean el problema. Gracias!
let buttonSearch;
let inputPokemon;
let namePokemon;
//Este codigo funciona...
fetch(`https://pokeapi.co/api/v2/pokemon/pikachu`)
.then((response) => response.json())
.then((pokemon) => {
console.log(pokemon.name);
})
.catch((error) => {
console.log(error)
})
function reload() {
document.getElementById('searchPokemon').addEventListener('click', searchPokemon);
inputPokemon = document.querySelector('form .input-pokemon').value.toLowerCase();
namePokemon = document.querySelector('.name-pokemon');
}
function searchPokemon() {
reload();
console.log(inputPokemon);
//Este codigo dentro de una funcion NO FUNCIONA
fetch(`https://pokeapi.co/api/v2/pokemon/pikachu`)
.then((response) => response.json())
.then((pokemon) => {
console.log(pokemon.name);
})
.catch((error) => {
console.log(error)
})
}
reload();
El objetivo FINAL es que cuando se presione #searchPokemon me traiga por FETCH el JSON de ese pokemon. Para este ejemplo y para que me entiendan he puesto directamente PIKACHU para que vean el error que me arroja cuando esta dentro de una funcion, por fuera funciona correctamente.
gracias!