如何使用 HTML onclick 事件传递数组索引

Question

这个 function 接受一个参数（一个包含玩家属性的 object）

const yourTeam = [];

function selectingYourTeam(player) {
  yourTeam.push(player);
  alert(yourTeam[0].name);
  return;
}

这个 for 循环创建了一个 HTML 表，其中包含您可以从中 select 的所有玩家。

for (i = 0; i < playerPool.length; i++) {
  document.write('<tr><td>' + playerPool[i].name + '</td><td>' + playerPool[i].region + 
  '</td><td>' + playerPool[i].skills["Offence"] + '</td><td>' +   
  playerPool[i].skills["Defence"]
  + '</td><td>' + playerPool[i].playerID + '</td><td><button type="button"
  onclick="selectingYourTeam(playerPool[0])">Select Player</button></td></tr>');
}   

问题是当onclick收到i时， alert()返回undefined 。 但是，当我给它[0]时，它会按预期工作，所以我知道逻辑是有效的。 无论如何，它必须接收i才能使其有目的。

<button type="button" onclick="selectingYourTeam(playerPool[0])">Select Player</button>

Answer 1

出了什么问题

'<button type="button" onclick="selectingYourTeam(' + playerPool[i] + ')">Select Player</button>'

您是否将 object 放在字符串中，而不是仅i的值。
那可能是这样结束的

<button type="button" onclick="selectingYourTeam(Object[object])">Select Player</button>

所以 go 用这个：

'<button type="button" onclick="selectingYourTeam(playerPool[' + i + '])">Select Player</button>'

或者使用模板litterals （我建议你探索），这将是：

document.write(`
<tr><td>
  ${playerPool[i].name}
</td><td>
  ${playerPool[i].region}
</td><td>
  ${playerPool[i].skills["Offence"]}
</td><td>
  ${playerPool[i].skills["Defence"]}
</td><td>
  ${playerPool[i].playerID}
</td><td>
  <button type="button" onclick="selectingYourTeam(playerPool[${i}])">Select Player</button>
</td></tr>`);