Estoy tratando de crear una función dedicada a agregar el detector de eventos al botón recién creado.
Actualmente estoy tomando un curso y parece que no puedo entender esta parte:
"Opcional (avanzado): puede optar por tener otra función dedicada a agregar el detector de eventos al botón recién creado en lugar de incluir el código dentro de la función addListItem(). Si lo hace, tendrá que pasar dos parámetros a la nueva función: la primera es la variable que se refiere al botón (para agregarle el detector de eventos), y la segunda es el objeto Pokémon, que es necesario llamar a showDetails en el controlador de eventos desde allí. función dentro de addListItem() después de que el botón se agregue al DOM".
Aquí hay un fragmento de lo que se me ocurrió:
function eventListener(button, pokemon) { button.addEventListener("click", function () { showDetails(pokemon); }); }Recomiendo consultar el código completo: https://codesandbox.io/s/event-listener-lm16im
Todo lo que hace esa función es tomar referencia de un botón y datos para mostrar, agregar un detector de eventos 'hacer clic' en ese botón y llamar a la función showDetails() cuando se hace clic en ese botón.
Aquí, he creado una demostración para que entiendas cómo funciona.
https://jsfiddle.net/6jhmaz8x/1/
archivo HTML
<html> <body> <button id="newButton"> Create new button </button> <div id="container"> </div> </body> </html>Archivo JS:
function eventListener(button, pokemon) { button.addEventListener("click", function () { showDetails(pokemon); }); } function showDetails(pokemon){ console.log(pokemon) } window.addEventListener('DOMContentLoaded', (event) => { document.getElementById('newButton').addEventListener('click',()=>{ let button = document.createElement('button'); button.type = 'button'; button.innerHTML = 'Show details'; document.getElementById('container').appendChild(button) let pokemon = 'this is pokemon' eventListener(button,pokemon) }) });