0

He creado un pequeño programa con fetch que te saca 4 fotos de la pokeapi según el nombre del pokemon que le metas, el problema es que al escribir otro pokemon y darle click al botón no funciona ni me carga nada, no se si es problema del botón o de que hice mal la petición.

function mostrarFoto(){
    
  let pokemon = document.getElementById("pokemon");
  console.log(pokemon.value.toLowerCase());

    let url="https://pokeapi.co/api/v2/pokemon/"+pokemon.value.toLowerCase();

    fetch(url)
    .then(res=>res.json())
    .then(data=>mostrarFoto(data))
    .catch(error=>console.log(error));

    // let ContadorSprites=Object.keys(data.sprites).length;
    // console.log(data.sprites);
    console.log(data.sprites["front_default"]);
      document.body.innerHTML+=`<img src='${data.sprites["front_default"]}'>`;
      document.body.innerHTML+=`<img src='${data.sprites["front_female"]}'>`;
      document.body.innerHTML+=`<img src='${data.sprites["front_shiny"]}'>`;
      document.body.innerHTML+=`<img src='${data.sprites["front_shiny_female"]}'>`;
}
<body>
    <!-- <script src="js/fetch2.js"></script> class="form-control"-->
    <input type="text" id="pokemon" class="form-control" placeholder="Introduce un Pokemon">
    <button type="button" onclick="mostrarFoto()" class="btn btn-outline-dark">Buscar</button>
    <br>
    <br>
    <script src="js/fetch2.js"></script>
</body>

1
  • Llamas a mostrarFoto-> hace un fetch -> que vuelve a llamar a mostrarFoto -> que vuelve a hacer un fetch -> que vuelve a llamar a mostrarFoto -> que hace un fetch -> que vuelve a....
    – Yussef
    Commented el 2 feb. 2023 a las 12:42

2 respuestas 2

1

Prueba asi

<body>
<!-- <script src="js/fetch2.js"></script> class="form-control"-->
<input type="text" id="pokemon" class="form-control" placeholder="Introduce un Pokemon">
<button type="button" onclick="mostrarFoto()" class="btn btn-outline-dark">Buscar</button>
<br>
<br>
<div id="img"></div>
<script>
function mostrarFoto() {
    let pokemon = document.getElementById("pokemon");
    let url = "https://pokeapi.co/api/v2/pokemon/" + pokemon.value.toLowerCase();
    img.innerHTML = '';
    fetch(url)
        .then(res => res.json())
        .then(function(data) {
            var obj = data.sprites;
            for (let elem in obj) {
                let valor = obj[elem];
                if (typeof valor === 'string') {
                    img.innerHTML += `<img src='${valor}'>`;
                }
            }
        })
        .catch(error => console.log(error));
}
</script>
1
  • 1
    Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 2 feb. 2023 a las 14:04
1

Como te señalé en los comentarios tienes un bucle infinito, llamas a mostrarFoto que hace un fetch que vuelve llamar a mostrarFoto y así sucesivamente

La solución es crear otra función para poner las imágenes

function mostrarFoto(){
    
  let pokemon = document.getElementById("pokemon");
  console.log(pokemon.value.toLowerCase());

    let url="https://pokeapi.co/api/v2/pokemon/"+pokemon.value.toLowerCase();
    fetch(url)
    .then(res=>res.json())
    .then(data=>colocarFotos(data))
    .catch(error=>console.log(error));

}

function colocarFotos(data){

    console.log(data.sprites["front_default"]);
      document.body.innerHTML+=`<img src='${data.sprites["front_default"]}'>`;
      document.body.innerHTML+=`<img src='${data.sprites["front_female"]}'>`;
      document.body.innerHTML+=`<img src='${data.sprites["front_shiny"]}'>`;
      document.body.innerHTML+=`<img src='${data.sprites["front_shiny_female"]}'>`;
}
<body>
    <!-- <script src="js/fetch2.js"></script> class="form-control"-->
    <input type="text" id="pokemon" class="form-control" placeholder="Introduce un Pokemon">
    <button type="button" onclick="mostrarFoto()" class="btn btn-outline-dark">Buscar</button>
    <br>
    <br>
    <script src="js/fetch2.js"></script>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.