按钮不弹出窗口。没有任何反应。没有控制台错误

Question

我在项目中创建了按钮，但它不起作用。

每一张神奇宝贝卡都会有一个按钮 - 它的功能是显示弹出窗口，其中包含有关神奇宝贝的附加信息，目前它只会弹出简单的标题。

   const pokemonList = document.getElementById('pokemonList')
const loadMoreButton = document.getElementById('loadMoreButton')

const maxRecords = 151
const limit = 10
let offset = 0;
// This function takes a Pokemon object and converts it into an HTML list item (<li>) string representation. 
// It uses template literals to interpolate data from the Pokémon object into the HTML string. 
function convertPokemonToLi(pokemon) {
    return `   
    <li class="pokemon ${pokemon.type}">
            <span class="number">#${pokemon.number}</span>
            <span class="name">${pokemon.name}</span>

            <div class="detail">
                <ol class="types">
                    ${pokemon.types.map((type) => `<li class="type ${type}">${type}</li>`).join('')}
                    </ol>
                <button type="button" id="openPopupBtn"><img id="pokeball" src="/assets/img/pokeball.png" alt="Pokeball">Details</button>
                <div id="popupWindow" class="popup">
                    <div class="popup-content">
                        <span id="closePopupBtn" class="close-btn">&times;</span>
                        <h2>Hello! This is a Popup!</h2>
                    </div>
                </div>              
            <img src="${pokemon.photo}"
            alt="${pokemon.name}">
            </div>
    </li>
    `
}

// This function fetches Pokémon using the pokeApi.getPokemons 

function loadPokemonItens(offset, limit) {
    pokeApi.getPokemons(offset, limit).then((pokemons = []) => {
        const newHtml = pokemons.map(convertPokemonToLi).join('')
        pokemonList.innerHTML += newHtml
    })
        .then(() => {
            document.getElementById('openPopupBtn').addEventListener('click', function () {
                document.getElementById('popupWindow').style.display = 'block';
            })

            document.getElementById('closePopupBtn').addEventListener('click', function () {
                document.getElementById('popupWindow').style.display = 'none';
            })
        })
}

loadPokemonItens(offset, limit)

loadMoreButton.addEventListener('click', () => {
    offset += limit
    const qtdRecordsWithNexPage = offset + limit

    if (qtdRecordsWithNexPage >= maxRecords) {
        const newLimit = maxRecords - offset
        loadPokemonItens(offset, newLimit)

        loadMoreButton.parentElement.removeChild(loadMoreButton)
    } else {
        loadPokemonItens(offset, limit)
    }
})

#openPopupBtn {
  display: flex;
  flex-direction: row;
  background-color: red;
  position: relative;
  top: 20px;
  padding: 0.15rem 0.2rem;
  margin: 0.15rem 0;
  border: none;
  border-radius: 1rem;
  align-items: center;
  font-size: 0.5rem;
  color: white;
}
.popup {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Black with opacity */
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.close-btn {
  cursor: pointer;
  float: right;
  width: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #f44336;
  border-radius: 50%;
  font-size: 1.2em;
}

我尝试了不同的放置按钮的方法，但没有任何效果。按钮只是处于非活动状态。我想我犯了一些逻辑错误。

Answer 1

当您使用 document.getElementById('openPopupBtn') 时，它会通过 id 获取第一个元素。尝试为每张 Pokémon 卡指定一个 id

使用 querySelectorAll('penPopupBtn')

document.querySelectorAll('#openPopupBtn').forEach(btn => {
    btn.addEventListener('click', function () {
          btn.nextElementSibling.style.display = 'none';
    })
})