Pokédex开发遇阻：点击事件无效，控制台报ceil未定义错误

错误原因 #

你遇到的ReferenceError: ceil is not defined是变量作用域问题：

• ceil是在forEach循环的回调函数内部用const声明的，它的作用域只限于当前循环的单次迭代，循环结束后外部无法访问这个变量。
• 同理，pokemonNumber也是循环内部的变量，外部访问同样会报错。
• 点击事件绑定写在循环外面，根本找不到对应的ceil元素，自然无法触发事件。

修复方案 #

把点击事件的绑定逻辑移到forEach循环内部，这样每个创建的Pokémon卡片（ceil）都能直接绑定点击事件，同时能正确访问当前Pokémon的编号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokédex</title>
</head>
<body>
    <div id='grid'></div>
    <div id="grid2"></div>
</body>
</html>

<style>
    #grid2 {
        display: none;
    }
    .item{
        display: flex;
        flex-direction: column;
        align-items: center;
        border: solid;
        cursor: pointer; /* 添加上手型光标，提示可点击 */
    }
    #grid{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }
</style>
<script>
    const grid = document.getElementById('grid')

    fetch('https://pokeapi.co/api/v2/pokemon?limit=151')
    .then(response => response.json())
    .then(data => {
        const results = data.results
        results.forEach((pokemon, index) => {
            const ceil = document.createElement('div')
            ceil.classList.add('item')
            const pokemonNumber = ++index

            const img = document.createElement('img')
            img.src=`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemonNumber}.png`
            const name = document.createElement('div')
            const pokemonName = pokemon.name
            name.innerText = pokemonName
            
            ceil.appendChild(img)
            ceil.appendChild(name)
            grid.appendChild(ceil)

            // 把点击事件绑定移到循环内部，直接给当前ceil绑定事件
            ceil.onclick = function() {
                fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonNumber}`)
                .then(response => response.json())
                .then(data => {
                    console.log(`编号: ${pokemonNumber}`)
                    console.log(`正面图片: ${data.sprites.front_default}`)
                    console.log(`背面图片: ${data.sprites.back_default}`)
                    console.log(`名称: ${data.name}`)
                    // 这里可以把数据渲染到grid2里，实现展示需求
                    const grid2 = document.getElementById('grid2')
                    grid2.style.display = 'block'
                    grid2.innerHTML = `
                        <h2>${data.name} (#${pokemonNumber})</h2>
                        <img src="${data.sprites.front_default}" alt="${data.name}正面">
                        <img src="${data.sprites.back_default}" alt="${data.name}背面">
                    `
                })
            }
        })
    }) 
</script>

额外优化点 #

• 给.item类添加cursor: pointer，让用户直观知道卡片可点击
• 点击后将数据渲染到grid2容器中，替代仅打印控制台，满足你展示Pokémon信息的需求

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