使用fetch返回结果作为函数参数时onclick调用失效如何解决？

核心问题点 #

• onclick引号嵌套冲突：你当前写的行内点击事件onclick="fetchPlayer("${players[0][0].Player}")" 外层用双引号包裹属性值，内层传参又用了双引号，浏览器解析时会直接截断属性值，导致事件绑定失效。
• 变量重名混乱：外层声明了let teamName、fetchTeam入参也叫teamName、函数内部又定义了const teamName = team[0].Name，三个同名变量作用域重叠，会导致取值不符合预期。
• 数组索引写法错误：fetchPlayer中"${data.sprite}[0]"的写法会把[0]当成普通字符串拼接在资源地址后，不会读取sprite数组的第一个元素，正确写法是${data.sprite[0]}。
• 行内事件传参鲁棒性差：如果球员名包含空格、引号等特殊字符，行内onclick会直接触发语法错误。

修复代码 #

优化方案（推荐：用事件委托替代行内onclick） #

let result = document.getElementById("result");
// 统一绑定事件监听，动态生成的按钮也能生效
result.addEventListener('click', e => {
  if(e.target.classList.contains('name')) {
    const playerName = e.target.dataset.player;
    fetchPlayer(playerName);
  }
})

// 重命名入参避免和内部变量冲突
const fetchTeam = async (inputTeamName) => {
  inputTeamName = document.getElementById("teamName").value;
  const response = await fetch(`http://localhost:3000/${inputTeamName}`);
  const data = await response.json();
  let team = data.teamStats;
  let players = data.playerStats;
  // 重命名变量避免和外层/入参冲突
  const currentTeamName = team[0].Name;
  const logo = team[0].Logo;
  const WL = team[0].WL;

  // 按钮用data-player存球员名，不需要行内onclick
  result.innerHTML = `
<br><div class="top">
<h3>${currentTeamName}</h3>
<h4>Win / Loss: ${WL}</h4>
<img src=${logo}></div>
<div class="flex-container">
<div class="flex-child">
<button class='name' data-player="${players[0][0].Player}"> ${players[0][0].Player} </button>
<!-- 其他球员按钮同理生成即可 -->
`
}

const results = document.getElementById("results");
const fetchPlayer = async (player) => {
  const response = await fetch(`https://get-player.herokuapp.com/${player}`);
  const data = await response.json();
  // 修正数组索引的写法
  results.innerHTML = `
<br>
<div class="layout">
        <div class="child"><img src="${data.sprite[0]}"><br>${data.mons[0]}</div>
`
}

临时修复方案（仅修复引号问题） #

如果不想改现有逻辑，只需要把行内onclick的内层引号改成转义的单引号即可：

<button class='name' onclick="fetchPlayer('${players[0][0].Player}')"> ${players[0][0].Player} </button>

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