Pokemon API实现点击按钮在新页面展示宝可梦详情的问题

你的核心问题是：当前代码里调用detailsPokemon修改的是index.html页面的DOM元素，但window.open打开的details.html是独立的新页面，两个页面的DOM环境完全分离，导致详情无法传递过去。下面是直接可行的解决方案：

步骤1：修改主页面的跳转逻辑 #

修改App.js中的seeDetail函数，不再在主页面请求数据，而是通过URL参数把宝可梦ID传递给详情页面：

function seeDetail(id){
    // 将ID作为URL参数传递给详情页
    window.open(`details.html?id=${id}`, '_blank');
}

步骤2：完善详情页面结构 #

原Details.html缺少完整的HTML文档结构，补充后才能正常加载JS和渲染内容：

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Detalle de Pokémon</title>
    <!-- 可引入和index.html相同的CSS文件，保持样式统一 -->
</head>
<body>
    <div id="details" >
        <h2>Pokemon Details</h2>
        <div class="more-details"></div>
    </div>
    <!-- 引入详情页专属的JS文件 -->
    <script src="details.js"></script>
</body>
</html>

步骤3：创建详情页专属JS文件 #

新建details.js，负责从URL获取ID、请求API数据并渲染详情：

const detailsContainer = document.querySelector('.more-details');
const endPoint = "https://pokeapi.co/api/v2/pokemon/";

// 从URL中提取宝可梦ID
function getPokemonId() {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get('id');
}

// 渲染完整的宝可梦详情
function renderDetails(poke) {
    detailsContainer.innerHTML = `
        <div class="card-pokemon">
            <span>ID: ${poke.id}</span>
            <div class="img">
                <img src="${poke.sprites.other["official-artwork"].front_default}" alt="${poke.name}">
            </div>
            <h2 class="pokemon-nombre">${poke.name}</h2>
            <div class="info">
                <p>Tipo de Pokemon:</p>
                ${poke.types.map(type => `<p>${type.type.name}</p>`).join('')}
                <p>Habilidades:</p>
                ${poke.abilities.map(ability => `<p>${ability.ability.name}</p>`).join('')}
                <div class="stats">
                    <p>${poke.height}m</p>
                    <p>${poke.weight}kg</p>
                </div>
                <p>Experiencia base: ${poke.base_experience}</p>
            </div>
        </div>
    `;
}

// 页面加载完成后自动获取数据并渲染
document.addEventListener('DOMContentLoaded', () => {
    const pokemonId = getPokemonId();
    if (pokemonId) {
        fetch(endPoint + pokemonId)
            .then(res => res.json())
            .then(data => renderDetails(data))
            .catch(err => console.error('Error al cargar detalles:', err));
    }
});

原理说明 #

1. 主页面通过URL参数?id=xxx把宝可梦ID传递给详情页，这是跨页面传递简单数据的最直接方式
2. 详情页加载时，从URL中提取ID，独立发起API请求获取数据并渲染，避免了跨页面DOM操作的问题

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