Javascript 在发出API请求时更改统计信息

我正在使用以下API发出请求，并在我的网站上显示利物浦队的一些统计数据

    var request = new XMLHttpRequest()

    request.open('GET', 'https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=liverpool', true)

    request.onload = function() {
      Begin accessing JSON data here
        var data = JSON.parse(this.response);
        var team = data.teams[0].strTeam;
        var league = data.teams[0].strLeague;
        var stadium = data.teams[0].strStadium;
        var info = data.teams[0].strStadiumDescription;
        var teamBadge = data.teams[0].strTeamBadge;
        var teamJersey = data.teams[0].strTeamJersey;

    document.getElementById("demo").innerHTML = team ;
    document.getElementById("demo2").innerHTML = league ;
    document.getElementById("demo3").innerHTML = stadium ;
    document.getElementById("demo4").innerHTML = info ;
    document.getElementById("demo5").src = teamBadge;
    document.getElementById("demo6").src = teamJersey;

---

我想在我的网站上做一个下拉列表，这样我可以选择另一个团队，它会自动显示新选择的团队的统计数据。目前，我只是手动更改API请求字符串中的名称，例如-liverpool to Burnley以显示Burnley统计数据

您可以使用这样的处理程序进行下拉列表。您正在侦听

onchange

事件，并将更新的

select

对象传递给函数

onTeamChange

。然后可以获取用户更改为的值，并使用该值构造get请求

function onTeamChange(teamList) {
  const selectedTeam = teamList.value;
  console.log(selectedTeam);

  // Call existing code here and modify url:
  const teamUrl = `https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${selectedTeam}`;
}

<select id="team-selector" onchange="onTeamChange(this)">
  <option value="liverpool">Liverpool</option>
  <option value="burnley">Burnley</option>
  <option value="arsenal">Best Team Ever</option>
</select>

团队变更功能（团队列表）{
const selectedTeam=teamList.value；
console.log（selectedTeam）；
//在此处调用现有代码并修改url:
const teamUrl=`https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${selectedTeam}`；
}
利物浦
伯恩利
史上最好的球队