[Dúvida] Problemas para criar a página de detalhe de Pokémon, usando javascript puro | JavaScript

Estou tentando terminar um projeto para um bootcamp que estou participando, mas estou empacado em um problema já faz um tempo. Alguém consegue me dizer como eu faço para passar o id específico de cada pokémon para a função loadPokemonDetail? Eu preciso passar os dados específicos do pokémon que o usuário clicou. Por exemplo, se o user clicou no bulbasauro, a página deve exibir apenas as informações do bulbasauro. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

const pokemonList = document.getElementById("pokemonList");
const loadMoreButton = document.getElementById("loadMoreButton");


const maxRecords = 151;
let offset = 0;
const limit = 10;


function loadPokemonItems(offset, limit) {
  pokeApi
    .getPokemons(offset, limit)
    .then((pokemons = []) => {
      const pokemonItems = pokemons
        .map((pokemon) => {
          return `
        <li class="pokemon ${pokemon.type}">
         <a href="pokemon.html"> 
          <span class="number">#${pokemon.number}</span>
          <span class="name">${pokemon.name}</span>
          <div class="detail">
            <ul class="types">
             ${pokemon.types
               .map(
                 (type) => `
              <li class="type ${type}">${type}</li>
             `
               )
               .join("")}
            </ul>
            <img src="${pokemon.image}" alt="${pokemon.name}" />
          </div>
         </a>
        </li>
      `;
        })
        .join("");


      pokemonList.innerHTML += pokemonItems;
      return pokemons;
    })
    .then((pokemons) => {
      const pokemonListItems = Array.from(
        pokemonList.getElementsByTagName("a")
      );
      pokemonListItems.forEach((pokemonLi) => {
        pokemonLi.addEventListener("click", () =>
          pokemons.forEach(loadPokemonDetail)
        );
      });
    });
}

Esta é a função "loadPokemonDetail":

const root = document.getElementById("root");

const loadPokemonDetail = (pokemon) => {
  console.log("POKEMON:", pokemon.name)
  return `
            <div>
              <h1>${pokemon.name}<h1>
            </div>
        `;
};

loadPokemonDetail();

No momento eu só consigo passar o array inteiro para a função, e não o pokémon específico. Qualquer algoritmo que resolva este problema está valendo, eu só quero muito desempacar desse projeto xD.

https://github.com/kellysondias/pokedex-dio/blob/main/assets/js/pokemon/index.js

Temos algumas soluções de como resolver isso, vai muito de como você quer fazer, podemos passar o número do pomen na mudança da url, com isso você pega usando o windows.location a url esse número e trabalha em cima dele, outra forma é realizar a mudança de tela com o click passando as informações via localstore. Como falei vai muito do que deseja fazer.

Aqui como você faria via url: primeiramente tu remove esse import que não faz necessario no index.html pois ele só é utilizado no pokemon.html

<script src="/assets/js/pokemon/index.js"></script>

no teu arquivo main.js linha 16 coloca isso:

<a href="pokemon.html#${pokemon.number}">

Já no teu arquivo pokemon/index.js ficaria assim:

const root = document.getElementById("root");

const loadPokemonDetail = (_ => {
  const numero = window.location.hash.slice(1);
  console.log("POKEMON:", numero)
  return `
            <div>
              <h1>pokemon.name/<h1>
            </div>
        `;
})();

Mergulhe em programação