Básicamente, agrego un bucle forEach para escupir mi matriz en este momento mientras practico el uso de DOM. Recibo el error en el registro de mi consola. En mi html tengo la clase ul "pokemon-list", y una li vacía con la clase "list-item". ¿Qué hice exactamente mal aquí?
//IIFE function let pokemonRepository = (function () { //List of pokemon Array let pokemonList = [ { name: 'Bulbasaur ', height: 2.4, types: ['Grass ', 'Poison'] }, { name: ' Charmander ', height: 2, types: 'Fire' }, { name: ' Squirtle ', height: 1.8, types: 'Water' } ]; //adds pokemon to the pokedex function add(pokemon) { pokemonList.push(pokemon); } function getAll() { return pokemonList } return { add: add, getAll: getAll } })(); // for each function to write pokemon and its name pokemonRepository.getAll().forEach(function(pokemon){ let listContainer = document.querySelector('.pokemon-list'); let listItem = document.createElement('li'); let button = document.createElement('button'); button.innerText = pokemonRepository.name button.classList.add('poke-button'); button.appendChild(listContainer); button.appendChild(listItem) });Por lo que entiendo, está tratando de hacer una lista de botones, pero según su código, eso no es lo que está sucediendo. Está intentando incrustar una lista dentro de un botón.
<ul class="pokemon-list"> </ul> <script> //IIFE function let pokemonRepository = (function () { //List of pokemon Array let pokemonList = [ { name: 'Bulbasaur ', height: 2.4, types: ['Grass ', 'Poison'] }, { name: ' Charmander ', height: 2, types: 'Fire' }, { name: ' Squirtle ', height: 1.8, types: 'Water' } ]; //adds pokemon to the pokedex function add(pokemon) { pokemonList.push(pokemon); } function getAll() { return pokemonList } return { add: add, getAll: getAll } })(); // for each function to write pokemon and its name pokemonRepository.getAll().forEach(function(pokemon){ let listContainer = document.querySelector('.pokemon-list'); let listItem = document.createElement('li'); let button = document.createElement('button'); button.innerText = pokemon.name; button.classList.add('poke-button'); listItem.appendChild(button); listContainer.appendChild(listItem); });Vi algunas cosas.
button.appendChild(listContainer); botón.appendChild(elemento de lista)
a
listItem.appendChild(botón); listContainer.appendChild(listItem);