I am making a menu of the first 9 Pokemon and adding all the info/pics dynamically with JavaScript. Everything appears on the screen but when I try and click to filter the Pokemon by their type, nothing happens. There is no error in the console and I am not sure what the problem is. I have attached the code here and any help or advice would be greatly appreciated. Thank you in advance.
<!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()
})
function displayPokemonMenu(array) {
let pokemonMap = pokemon.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']
);
const typeBtns = types.map(function(type){
return `<button class="filter-btn">${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){
if(type === item. type){
return item;
}
})
if(type === 'All'){
displayPokemonMenu(pokemon);
} else {
displayPokemonMenu(pokemonFilter);
}
})
})
}
</script>
</body>
</html>
