将事件侦听器添加到动态创建的按钮

Question

Working on a fun side project and ran into a little trouble. Basically, I have a page that allows a user to login to Spotify. I then redirect them to a page that puts their top 10 artists into a card with the artists name, picture, and a little button to view upcoming shows. I would like to link that button to a function I already wrote in another script that will pull their specified artists upcoming concerts.

The trouble I'm running into is accessing the buttons I'm creating. Here's the full function I'm running:

async function fetchArtists() {
  return await fetch('https://api.spotify.com/v1/me/top/artists', settings)
  .then((response) => {return response.json()})
    .then((data) => {
      let listOfArtists = data.items.slice(0, 10).map((item) => {
        return {
         name: item.name, 
         picture: item.images[1].url
        }
      })
      //console.log(listOfArtists)
      return listOfArtists;


    }).then((listOfArtists) => {
      listOfArtists.forEach((artist) => {
        let createCard = document.createElement('div');
        createCard.class = "card"
        createCard.style = "width: 40% height: 40%"
        createCard.innerHTML = `
        <div class="row card-row justify-content-center">
          <div class="col-md-6">
            <div class="card bg-transparent text-black text-center ">
              <img src="${artist.picture}" class="card-img rounded-circle shadow-lg p-3 mb-5 bg-black rounded" alt="...">
                <div class="card-img-overlay"></div>
                  <div class="card-footer font-weight-bold bg-transparent">${artist.name}
                  <div class="row-md-6">
                    <button class="btn btn-dark">View Upcoming Shows</button>
                  </div>
                </div>
              </div>
            </div>


        let container = document.querySelector(".artist-grid")
        container.appendChild(createCard)
      })
});
}

This is working almost exactly how I want it, and outputs this: The problem is I can't seem to get an event listener to work on the buttons. I tried adding this code inside of my forEach, below the last

myButton = document.querySelector(".btn")
myButton.addEventListener("click, () => {
console.log("Test to see if button onclick works")

And it doesn't output anything to the console on click. So I ran a console log of myButton and it showed 10 buttons, so not sure what the disconnect is if it looks seems like I am able to access them.

Answer 1

perhaps it is because you forgot the double quote after click? myButton.addEventListener("click, () => { console.log("Test to see if button onclick works") should be replaced with myButton.addEventListener("click", () => { console.log("Test to see if button onclick works")

Answer 2

There's a few things it could be:

• Does the button require a z-index bring it to the front?
• Does the button or any parent element have pointer-events: none; ?
• Are you calling addEventListener after the append?
• Has the DOM operation finished by the time you try to add the event listeners?
• You're using querySelector here but do you want to add a click listener to all buttons, or just one?

If your problem is JS related you could try iterating over those buttons and wrapping the addEventListener operation in a timeout, so the DOM append has buffer to finish, and you can debug further, something like:

async function fetchArtists() {
// ...

}).then((listOfArtists) => {
  // ...

  container.appendChild(createCard);

  setTimeout(() => {
    const buttons = document.querySelectorAll(`.btn`);

    buttons.forEach((button, index) => {
      console.log(`Button ${index} [query]: `, button);

      button.addEventListener(`click`, e => {
        console.log(`Button ${index} [click]: `, e);
      });
    })
  });
});