宝可梦图鉴开发：如何让按钮点击加载对应宝可梦详情页？

方法一：利用自定义属性（data-*）传递ID #

创建宝可梦按钮时，给每个按钮添加data-id属性存储对应宝可梦的ID：

// 示例循环创建按钮代码
pokemons.forEach(pokemon => {
  const btn = document.createElement('button');
  btn.dataset.id = pokemon.id; // 将ID绑定到自定义属性
  btn.innerHTML = `<img src="${pokemon.sprites.front_default}" alt="${pokemon.name}">`;
  btn.addEventListener('click', loadPokePage);
  document.getElementById('poke-list').appendChild(btn);
});

修改loadPokePage函数，通过事件对象获取ID：

async function loadPokePage(e) {
  // 找到点击的按钮元素并提取ID
  const pokemonId = e.target.closest('button').dataset.id;
  const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`);
  const pokemonData = await response.json();
  // 此处处理宝可梦详情渲染逻辑
  console.log(pokemonData);
}

方法二：创建按钮时直接绑定带参数的事件函数 #

循环创建按钮时，利用闭包将ID直接传入点击事件对应的函数：

pokemons.forEach(pokemon => {
  const btn = document.createElement('button');
  btn.innerHTML = `<img src="${pokemon.sprites.front_default}" alt="${pokemon.name}">`;
  // 直接绑定带ID参数的函数，避免循环变量覆盖问题
  btn.addEventListener('click', () => loadPokePage(pokemon.id));
  document.getElementById('poke-list').appendChild(btn);
});

修改loadPokePage函数接收ID参数：

async function loadPokePage(pokemonId) {
  const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`);
  const pokemonData = await response.json();
  // 此处处理宝可梦详情渲染逻辑
  console.log(pokemonData);
}

两种方法都能解决ID传递问题：第一种更偏向解耦设计，第二种逻辑更直观。另外注意fetch后要通过await处理响应，才能获取到可用的宝可梦数据。

内容的提问来源于stack exchange，提问作者Pedro Rebello