Pokémon卡片按钮无响应：点击无法触发弹窗问题求助

核心问题 #

你的弹窗按钮无响应的主要原因有两个：

1. 重复ID使用：每个Pokémon卡片都包含相同的ID（openPopupBtn、popupWindow、closePopupBtn），但HTML要求ID必须唯一。document.getElementById只会返回第一个匹配元素，导致只有第一个卡片的按钮能绑定事件，其余按钮完全无响应。
2. 事件绑定方式错误：原代码每次加载新卡片后，仅给第一个匹配ID的元素绑定事件，动态新增的卡片按钮没有事件监听。

修正后的代码 #

JavaScript 部分

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

const maxRecords = 151
const limit = 10
let offset = 0;

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" class="openPopupBtn"><img src="/assets/img/pokeball.png" alt="Pokeball">Details</button>
                <div class="popupWindow popup">
                    <div class="popup-content">
                        <span class="closePopupBtn close-btn">&times;</span>
                        <h2>${pokemon.name} 详情</h2>
                        <p>编号: #${pokemon.number}</p>
                        <p>属性: ${pokemon.type}</p>
                    </div>
                </div>              
            <img src="${pokemon.photo}" alt="${pokemon.name}">
            </div>
    </li>
    `
}

function loadPokemonItens(offset, limit) {
    pokeApi.getPokemons(offset, limit).then((pokemons = []) => {
        const newHtml = pokemons.map(convertPokemonToLi).join('')
        pokemonList.innerHTML += newHtml
    })
}

// 事件委托：处理所有卡片的弹窗打开事件
pokemonList.addEventListener('click', (e) => {
  const openBtn = e.target.closest('.openPopupBtn');
  if (openBtn) {
    const popup = openBtn.closest('.pokemon').querySelector('.popupWindow');
    popup.style.display = 'block';
  }
});

// 事件委托：处理弹窗关闭事件（包括点击关闭按钮和弹窗外部）
document.addEventListener('click', (e) => {
  // 点击关闭按钮
  const closeBtn = e.target.closest('.closePopupBtn');
  if (closeBtn) {
    const popup = closeBtn.closest('.popupWindow');
    popup.style.display = 'none';
    return;
  }
  
  // 点击弹窗外部关闭
  const popup = e.target.closest('.popupWindow');
  if (popup && !e.target.closest('.popup-content')) {
    popup.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)
    }
})

CSS 部分

.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;
  cursor: pointer; /* 添加点击光标提示 */
}
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000; /* 确保弹窗在最上层 */
}

.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);
  border-radius: 8px; /* 圆角优化 */
}

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

关键修复点说明 #

1. 替换ID为类：将重复的ID改为类名，避免HTML唯一性冲突。
2. 事件委托机制：通过父元素（pokemonList和document）监听事件，确保动态新增的卡片按钮也能触发弹窗，无需每次加载后重新绑定事件。
3. DOM遍历匹配弹窗：使用closest()和querySelector()确保每个按钮只触发对应卡片的弹窗。
4. 优化用户体验：添加点击光标提示、弹窗层级保障、点击外部关闭弹窗等功能。

内容的提问来源于stack exchange，提问作者Matt Gary