Before we get into my code let me elaborate. I am doing a coding course and this should be a reletively simple task where my pokemon array list should show up, once I run it, in a list as buttons that I can click. However, nothing shows up and I have no clue why. I would very much appreciate some help with this. Below you will find my JS and HTML
JavaScript:
let pokemonRepository = (function () {
let pokemonList = [
{ name: 'Pikachu', type: 'electric', height: 2},
{ name: 'Charizard', type: 'fire', height: 6},
{ name: 'Squirtle', type: 'water', height: 3}
];
});
function add(pokemon) {
pokemonList.push(pokemon);
}
function getAll() {
return repository;
}
function addListItem(pokemon){
let pokemonList = document.querySelector('.pokemon-list');
let listPokemon = document.createElement('li');
let button = document.createElement('button');
button.innerText = pokemon.name;
button.classList.add('button-class');
listPokemon.appendChild(button);
pokemonList.appendChild(listpokemon);
button.addEventListener ('click', function(event){
showDetails(pokemon);
});
}
function showDetails(pokemon) {
console.log()
};
return {
add: add,
getAll: getAll,
addListItem: addListItem,
showDetails: showDetails
};
})();
pokemonRepository.getAll().forEach(function (pokemon) {
pokemonRepository.addListItem(pokemon);
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple JS App</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header class="page-header">
<!-- NOTE:Add your logo here -->
<img width="200" src="img/logo.png" alt="logo" class="page-header__item" >
<h1>Pokedex</h1>
<ul class='pokemon-list'></ul>
<script src="js/promise-polyfill.js"></script>
<script src="js/scripts.js"></script>
</header>
</body>
</html>
Last edited by a moderator: