根据下拉菜单更改抓取网址<option>

Question

我对一般编码和尝试一些项目很陌生。我想写一个网站，显示不同的公式1统计数据，这样我就可以学习使用api。

我有一个下拉菜单，其中显示当前赛季的所有比赛+比赛编号(第一场比赛为编号1(。我希望获取URL根据用户选择的进行更改

let roundsArray = []
fetch("https://ergast.com/api/f1/2022/11/results.json").then((data) =>{
return data.json();
}).then((objectData)=>{
console.log(roundsArray);
let result = objectData.MRData.RaceTable.Races[0].Results;
let race = objectData.MRData.RaceTable.Races[0].raceName;
document.getElementById('circuit').innerHTML = race;
let tableData="";
result.map((value)=>{
tableData+=`
<tr>
<td>${value.position}</td>
<td>${value.Driver.givenName + " " + value.Driver.familyName}</td>
<td>${value.Constructor.name}</td>
<td>${value.points}</td>
</tr>`;   
});
document.getElementById("table_body").
innerHTML=tableData;
});
fetch("https://ergast.com/api/f1/current.json").then((data) =>{
return data.json();
}).then((objectData)=>{

let races = objectData.MRData.RaceTable.Races;
races.forEach(element => {
let testing = { title: element.raceName, round: element.round }
roundsArray.push(testing)
});
console.log(roundsArray);
let menuData="";
roundsArray.map((value)=>{
menuData+=`
<option>${value.round} - ${value.title}</option>
`;
});
document.getElementById("chose").
innerHTML=menuData;
});

我希望fetch url中年份后的数字(在代码"11"中(更改为value.round(在菜单数据中(。不知道该怎么做。也很抱歉一些可能非常混乱的代码

Answer 1

一旦值被选择到url中，就可以将其放入选择选项中，然后在新的url 上调用API

下面代码中的注释更清楚地解释了

function getSelectedUrl(){
// get selected option
var selectedOption = document.getElementById("RaceList").value;

// put the selected option in the url and return it
return `https://ergast.com/api/f1/2022/${selectedOption}/results.json`;
}
function getRace(){
// call getSelectedUrl to get new url based in selected option
var newUrl = getSelectedUrl();

// call the API with the new url
fetch(newUrl).then((data) =>{
return data.json();
}).then((objectData)=>{
console.log(objectData);
});
}
// When you select an option it will call getRace function
document.getElementById("RaceList").addEventListener("change", getRace);

<select id="RaceList">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>