同一<img>标签切换图片及GENGAR类型不显示问题求助

常见问题原因及修复步骤 #

• DOM元素选择错误
  先确认用来显示属性的types元素能被正确获取。检查HTML里是否有对应ID的元素，比如：

  <div id="pokemon-types"></div>
  

  JS里获取元素的代码要正确：

  const types = document.getElementById('pokemon-types');
  

• 属性数据处理逻辑错误
  PokeAPI返回的宝可梦属性是数组结构，每个元素嵌套了type.name字段。如果直接赋值整个数组或者只取第一个元素，就会导致耿鬼的两个属性无法全部显示。正确的处理方式是遍历数组拼接文本：

  // 假设从API获取到的宝可梦数据为pokemon对象
  const typeList = pokemon.types.map(item => item.type.name.toUpperCase()).join(' / ');
  types.innerHTML = typeList;
  

• 缺失错误处理
  当搜索不存在的宝可梦时，要给属性区域设置默认文本，避免空白：

  if (pokemon.types?.length) {
    const typeList = pokemon.types.map(item => item.type.name.toUpperCase()).join(' / ');
    types.innerHTML = typeList;
  } else {
    types.innerHTML = '未找到属性';
  }
  

完整搜索函数示例 #

async function searchPokemon(inputValue) {
  try {
    const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${inputValue.toLowerCase()}`);
    const pokemon = await res.json();
    
    // 更新图片
    const pokemonImg = document.getElementById('pokemon-img');
    pokemonImg.src = pokemon.sprites.front_default;
    pokemonImg.alt = pokemon.name;
    
    // 更新属性
    const types = document.getElementById('pokemon-types');
    const typeList = pokemon.types.map(item => item.type.name.toUpperCase()).join(' / ');
    types.innerHTML = typeList;
  } catch (err) {
    console.log('搜索失败：', err);
    const types = document.getElementById('pokemon-types');
    types.innerHTML = '未找到该宝可梦';
    const pokemonImg = document.getElementById('pokemon-img');
    pokemonImg.src = '你的默认图片路径';
  }
}

内容的提问来源于stack exchange，提问作者Dana Rutscher