Estoy creando una aplicación de usuario aleatorio simple que cada vez que se hace clic en el botón, mostrará la información del nuevo usuario, mi siguiente botón no funciona, no tengo idea de lo que estoy haciendo mal, pero creo que estoy llamando al incluso antes de que se cargue el DOM.
const apiUrl = `https://randomuser.me/api`; const nextBtn = document.querySelector('button'); async function getUser(){ const res = await fetch(apiUrl); const data = await res.json(); console.log(data.results[0]); let results = data.results[0]; displayUser(results) } function displayUser(results){ const userContainer = document.createElement('div'); userContainer.classList.add('user-container'); userContainer.innerHTML = ` <img src="${results.picture.large}" alt=""> <div class="title"> <h3>${results.name.first}</h3> <h3>${results.name.last}</h3> </div> <div class="info"> <h3>${results.location.street.number + ' ' +results.location.street.name}</h3> <h3>${results.phone}</h3> <h3>${results.email}</h3> </div> <button>Next User</button> `; document.body.appendChild(userContainer); } getUser(); nextBtn.addEventListener('click', getUser);Debe vincular el evento al botón cuando cree el botón. El código no sigue buscando botones para agregar y agregarle eventos.
function add() { const userContainer = document.createElement('div'); userContainer.classList.add('user-container'); userContainer.innerHTML = `<button>Add</button>`; userContainer.querySelector('button').addEventListener('click', add); document.body.append(userContainer); } add();