JavaScript实现Pokemon类型筛选页面无响应问题求助

我正在制作一个简单页面，点击按钮后可按类型筛选前9只Pokemon。已通过代码验证器检查，控制台无报错，每次点击按钮时控制台输出的类型和数组显示筛选逻辑正常，但页面毫无变化。

原代码 #

JavaScript #

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();
})

function displayPokemonMenu(array) {
  let pokemonMap = pokemon.map(function(item) {
    return `<div class="pokemon-item">
            <img class="photo" src="${item.image}" alt="${item.name}">
            <h2>${item.name}</h2>
            <h3># <span id="number">${item.number}</span></h3>
            <h4>Type: <span id="type">${item.type}</span></h4>
        </div>`
  })
  pokemonMap = pokemonMap.join('');
  sectionCenter.innerHTML = pokemonMap;
}


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

  const typesBtns = types.map(function(type) {
    return `<button class="filter-btn" data-id="${type}">${type}</button>`
  }).join('');

  btnContainer.innerHTML = typesBtns;

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

  filterBtns.forEach(function(btn) {
    btn.addEventListener('click', function(e) {
      let type = e.currentTarget.dataset.id;
      console.log(type)
      const pokemonFilter = pokemon.filter(function(item) {
        if (type === item.type) {
          return item;
        }
      })
      if (type === 'All') {
        displayPokemonMenu(pokemon);
      } else {
        displayPokemonMenu(pokemonFilter);
        console.log(pokemonFilter);
      }
    })
  })
}

HTML #

<img class="logo" src="images/logo.png" alt="logo">
<br>
<br>
<div class="btn_container">
  <button class="filter-btn" data-id="All">All</button>
</div>
<div class="section-center">
  <div class="pokemon-item">
    <img class="photo" src="images/bulbasaur.png" alt="Bulbasaur">
    <h2>Bulbasaur</h2>
    <h3># <span id="number">1</span></h3>
    <h4>Type: <span id="type">Grass</span></h4>
  </div>
</div>

问题根源 #

displayPokemonMenu 函数始终遍历全局的 pokemon 数组，完全没有使用传入的筛选后的 array 参数，所以不管点击哪个按钮，页面都会渲染全部Pokemon，看起来像是没变化。

修正后的代码 #

只需要修改 displayPokemonMenu 函数，让它使用传入的参数，并添加默认值处理：

function displayPokemonMenu(array = pokemon) {
  let pokemonMap = array.map(function(item) {
    return `<div class="pokemon-item">
            <img class="photo" src="${item.image}" alt="${item.name}">
            <h2>${item.name}</h2>
            <h3># <span id="number">${item.number}</span></h3>
            <h4>Type: <span id="type">${item.type}</span></h4>
        </div>`
  })
  pokemonMap = pokemonMap.join('');
  sectionCenter.innerHTML = pokemonMap;
}

修改说明 #

• 将函数内遍历的对象从全局 pokemon 改为传入的 array 参数
• 给参数添加默认值 = pokemon，确保页面初始化调用 displayPokemonMenu() 时，默认渲染全部Pokemon

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