I am creating a simple random user app that every time that the button is clicked, it will show the new user information, my next button doesn't work, i have no idea what i am doing wrong but i think I'm calling the button even before The DOM loads.
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);
You need to bind the event to the button when you create the button. The code does not keep looking for buttons to be added and add events to it.
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();