新手求助：为pokemonList对象按钮添加showDetails点击事件失败

错误原因分析 #

• showDetails函数里错误调用了eventListener，还传了字符串"button"，但这个函数需要接收实际的DOM按钮元素和对应的pokemon对象；而且showDetails本身是点击后的回调函数，根本不该在这里绑定事件。
• 遍历创建按钮的循环中，完全没调用eventListener给每个按钮绑定点击逻辑，等于按钮只是被创建出来，没有任何点击响应的绑定。

修正后的完整代码 #

// 事件绑定函数：接收按钮元素和对应的pokemon对象
function eventListener(button, pokemon) {
  button.addEventListener("click", function() {
    showDetails(pokemon);
  });
}

// 点击后执行的回调：直接处理pokemon数据
function showDetails(pokemon) {
  console.log(pokemon.name); // 这里可以替换成你需要的显示逻辑，比如更新页面DOM
}

// 遍历创建按钮并绑定事件
pokemonList.forEach(function(pokemon) {
  let pokemonList = document.querySelector(".pokemon-list");
  let listItem = document.createElement("li");
  let button = document.createElement("button");
  button.innerText = pokemon.name;
  button.classList.add("stylez");
  listItem.appendChild(button);
  pokemonList.appendChild(listItem);
  
  // 关键：创建按钮后调用eventListener绑定点击事件，传入当前按钮和对应pokemon对象
  eventListener(button, pokemon);
});

简化写法（可选） #

你也可以省去单独的eventListener函数，直接在循环里绑定事件，代码更简洁：

function showDetails(pokemon) {
  console.log(pokemon.name);
}

pokemonList.forEach(function(pokemon) {
  let pokemonList = document.querySelector(".pokemon-list");
  let listItem = document.createElement("li");
  let button = document.createElement("button");
  button.innerText = pokemon.name;
  button.classList.add("stylez");
  // 直接绑定点击事件
  button.addEventListener("click", () => {
    showDetails(pokemon);
  });
  listItem.appendChild(button);
  pokemonList.appendChild(listItem);
});

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