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>
mostrarFoto
-> hace un fetch -> que vuelve a llamar amostrarFoto
-> que vuelve a hacer un fetch -> que vuelve a llamar amostrarFoto
-> que hace un fetch -> que vuelve a....