Skip to main content
se añadieron 215 caracteres en el cuerpo
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

HTML:

<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>

JS:

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>
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"]}'>`;
      

}
 

HTML:

<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>

JS:

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"]}'>`;
      

}

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>
 

Origen Enlace

Problema con fetch y evento de botones javascript

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.

HTML:

<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>

JS:

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"]}'>`;
      

}