javascript – How to get ID on click of a Pokemon and use id in another URL using PokeApi

I am trying to create a simple Pokedex using PokeApi, where I show 20 pokemon on the screen. When a pokemon is clicked, I go to a new page where I show the stats of that specific pokemon. I figured out how to go to the next page when clicking on a pokemon, in the file index.js:

document.getElementById("pokemons").onclick = function () {
      location.href = "pokemon.html";
    }

The problem is I don’t know how to pass the id of that pokemon into the next file so it can be used to gather information like its name, height, weight, etc. In my pokemon.js file, I have the beginnings of what I would like to accomplish but I am completely stuck. I have included all of my files, any help would be greatly appreciated.

index.html

//fetch pokemon from API
const getPokemons = fetch("https://pokeapi.co/api/v2/pokemon?limit=20&offset=0")
                    .then(r=>r.json() )
                    .then(data => {
                    return data;
});


const getImagePokemon = (pokemonUrl) => fetch(pokemonUrl)
                                        .then(r=>r.json() )
                                        .then(data => {
                                        return data.sprites.front_default;
});




const getPokemonsImages = async (pokemons) => {
  for(let i=0; i<pokemons.length; i++) {
    pokemons[i].image = await getImagePokemon(pokemons[i].url);
  }
  return pokemons;
}

window.onload = async () => {

  let data = await getPokemons;
  let pokemons = await getPokemonsImages(data.results);

  for(let i=0; i<pokemons.length; i++) {
    let container = document.createElement("div");
    container.className = "col text-center card";

    let h2Container = document.createElement("h2");
    h2Container.innerText = pokemons[i].name;

    let imgContainer = document.createElement("img");
    imgContainer.src = pokemons[i].image;
    imgContainer.className = "pokemon-image";

    container.appendChild(imgContainer);
    container.appendChild(h2Container);

    document.getElementById("pokemons").appendChild(container);
    document.getElementById("pokemons").onclick = function () {
      location.href = "pokemon.html";
    }

};
}

pokemon.js

//fetch pokemon from API
const getPokemons = fetch("https://pokeapi.co/api/v2/pokemon?limit=20&offset=0")
                    .then(r=>r.json() )
                    .then(data => {
                    return data;
});


const getImagePokemon = (pokemonUrl) => fetch(pokemonUrl)
                                        .then(r=>r.json() )
                                        .then(data => {
                                        return data.sprites.front_default;
});




const getPokemonsImages = async (pokemons) => {
  for(let i=0; i<pokemons.length; i++) {
    pokemons[i].image = await getImagePokemon(pokemons[i].url);
  }
  return pokemons;
}

window.onload = async () => {

  let data = await getPokemons;
  let pokemons = await getPokemonsImages(data.results);

  for(let i=0; i<pokemons.length; i++) {
    let container = document.createElement("div");
    container.className = "col text-center card";

    let h2Container = document.createElement("h2");
    h2Container.innerText = pokemons[i].name;

    let imgContainer = document.createElement("img");
    imgContainer.src = pokemons[i].image;
    imgContainer.className = "pokemon-image";

    container.appendChild(imgContainer);
    container.appendChild(h2Container);

    document.getElementById("pokemons").appendChild(container);
    document.getElementById("pokemons").onclick = function () {
      location.href = "pokemon.html";
    }

};
}

index.css

.flex-grid-thirds {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; 
}
.flex-grid-thirds .col {
  width: 20%;
}

.card{
  border: 2px solid darkblue;
  cursor: pointer;
  border-radius: 20px;
  margin: 20px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.text-center{
  text-align: center;
}

.pokemon-image{
  width:135px;
}

pokemon.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="pokemon.css">
    <script src="pokemon.js"></script>
  </head>

  <body>
    <h1 class="namePokemon">Nombre </h1>
    <div id="pokemon" class="pokemonCard">
        
    </div>
  </body>

</html>

pokemon.js

const getPokemon = (id) => fetch("https://pokeapi.co/api/v2/pokemon/" + id)
                    .then(r=>r.json() )
                    .then(data => {
                    return data; 
});

const getImagePokemon = (pokemonUrl) => fetch(pokemonUrl)
                                        .then(r=>r.json() )
                                        .then(data => {
                                        return data.sprites.front_default;
});

const getNamePokemon = (pokemonUrl) => fetch(pokemonUrl)
                                        .then(r=>r.json() )
                                        .then(data => {
                                        return data.name;
});


//maybe we can use this to get the amount of abilities later?
const getPokemonsImages = async (pokemon) => {
    pokemon.image = await getImagePokemon(pokemon.url);
    return pokemon;
}


window.onload = async () => {

    let data = await getPokemon; //this is where I think the problem is
    let pokemon = await getImagePokemon(data.results);
    
    let container = document.createElement("div");
    container.className = "col text-center card";

    let imgContainer = document.createElement("img");
    imgContainer.src = pokemon.image;
    imgContainer.className = "pokemon-image";

    container.appendChild(imgContainer);

    document.getElementById("pokemon").appendChild(container);
  
  };

pokemon.css


body{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 100vh;
}
.pokemonCard {
    background-color: white; 
    height: 70%;
    width: 50%;

    border: 2px solid darkblue;
    border-radius: 10px;
    margin: 20px;
    
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2);

    display: flex;
    align-items: center;
    justify-content: center;

}

.namePokemon{
    position: absolute;
    top: 150px;
}

Leave a Comment