AddEventListener到按钮的问题

Question

我正在创建一个简单的随机用户应用程序，每次点击按钮时，它都会显示新的用户信息，我的下一个按钮不起作用，我不知道我在做什么错即将在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);

Answer 1

创建按钮时，您需要将事件绑定到按钮。该代码不会继续寻找要添加的按钮并将事件添加到其中。

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();