宝可梦类型筛选按钮点击无响应问题排查求助

核心问题1：筛选按钮未绑定类型标识 #

你生成筛选按钮时，没有给按钮添加data-id属性，导致点击按钮时e.currentTarget.dataset.id获取到的值是undefined，后续的筛选逻辑自然无法触发。

核心问题2：展示函数未正确使用传入的筛选数组 #

displayPokemonMenu函数里始终使用全局的pokemon数组渲染，忽略了传入的筛选后数组，即便筛选逻辑正常，页面也不会更新。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>brand new</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="btn-container">
        <button class="filter-btn">Grass</button>
    </div>
    <div class="section-center">
        <div class="pokemon-item">
            <img src="images/bulbasaur.png" alt="bulbasaur" class="photo">
            <h2>Bulbasaur</h2>
            <h3>#<span class="number">1</span></h3>
            <h4>Type<span class="type">Grass</span></h4>
        </div>

    </div>


    <script>
        const pokemon = [
            {
                name: 'Bulbasaur',
                image: 'images/bulbasaur.png',
                number: 1,
                type: 'Grass'
            },
            {
                name: 'Ivysaur',
                image: 'images/ivysaur.png',
                number: 2,
                type: 'Grass'
            },
            {
                name: 'Venusaur',
                image: 'images/venusaur.png',
                number: 3,
                type: 'Grass'
            },
            {
                name: 'Charmander',
                image: 'images/charmander.png',
                number: 4,
                type: 'Fire'
            },
            {
                name: 'Charmeleon',
                image: 'images/charmeleon.png',
                number: 5,
                type: 'Fire'
            },
            {
                name: 'Charizard',
                image: 'images/charizard.png',
                number: 6,
                type: 'Fire'
            },
            {
                name: 'Squirtle',
                image: 'images/squirtle.png',
                number: 7,
                type: 'Water'
            },
            {
                name: 'Wartortle',
                image: 'images/wartortle.png',
                number: 8,
                type: 'Water'
            },
            {
                name: 'Blastoise',
                image: 'images/blastoise.png',
                number: 9,
                type: 'Water'
            }
        ]

        const sectionCenter = document.querySelector('.section-center');
        const btnContainer = document.querySelector('.btn-container');

        window.addEventListener('DOMContentLoaded', function () {
            displayPokemonMenu();
            displayMenuButtons()
        })

        // 修复：使用传入的数组，默认值为全局pokemon
        function displayPokemonMenu(array = pokemon) {
            let pokemonMap = array.map(function (item) {
                return `<div class="pokemon-item">
            <img src="${item.image}" alt="${item.name}" class="photo">
            <h2>${item.name}</h2>
            <h3>#<span class="number">${item.number}</span></h3>
            <h4>Type<span class="type">${item.type}</span></h4>
        </div>`
            }).join('');
            sectionCenter.innerHTML = pokemonMap;
        }

        function displayMenuButtons() {
            const types = pokemon.reduce(function(values, item){
                if(!values.includes(item.type)){
                    values.push(item.type);
                }
                return values
            }, ['All']);

            // 修复：给按钮添加data-id属性，绑定类型值
            const typeBtns = types.map(function(type){
                return `<button class="filter-btn" data-id="${type}">${type}</button>`
            }).join('');

            btnContainer.innerHTML = typeBtns;

            const filterBtns = btnContainer.querySelectorAll('.filter-btn');

            filterBtns.forEach(function(btn){
                btn.addEventListener('click', function(e){
                    let type = e.currentTarget.dataset.id;
                    let pokemonFilter = pokemon.filter(function(item){
                        return type === item.type;
                    })
                    if(type === 'All'){
                        displayPokemonMenu(pokemon);
                    } else {
                        displayPokemonMenu(pokemonFilter);
                    }
                })
            })
        }
    </script>
</body>

</html>

关键修复点说明 #

1. 按钮添加data-id：在生成按钮的HTML字符串中加入data-id="${type}"，让点击时能正确获取当前筛选的类型。
2. 展示函数参数处理：给displayPokemonMenu函数设置默认参数array = pokemon，当传入筛选后的数组时，使用该数组渲染页面，否则展示全部宝可梦。

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