我目前有一个代码，显示只有一个国家在我的HTML网站。 fetch（）API有一个国家的链接。 我试图列出一个选项列表，当用户单击其中任何一个选项时，COVID-19的状态将通过fetch（）发生变化。 这是现在的代码。 我只想让fetch（）API URL在用户选择一个选项（国家）时发生变化。
主要问题是，当用户从select选项中选择一个项目时，如何让提取url发生变化？
这就是我想要的样子
HTML:
<body>
<div class="options">
<form>
<label for="countries">Choose a country:</label>
<select id="countries">
<option value="SA">Saudi Arabia</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="GR">Greece</option>
</select>
</form>
</div>
<div class="container">
<h2>COVID -19 Cases in <span id="country"></span> <img src="" id="flag"></h2>
<div class="board">
<div class="card a"><i class="fa fa-tachometer"></i>
<h5>Active Cases</h5><span id="active"></span>
</div>
<div class="card ca"><i class="fa fa-th-list"></i>
<h5>Total Cases</h5><span id="cases"></span>
</div>
<div class="card cr"><i class="fa fa-times-circle"></i>
<h5>Critical Cases</h5><span id="critical"></span>
</div>
<div class="card d"><i class="fa fa-times"></i>
<h5>Total Deaths</h5><span id="death"></span>
</div>
<div class="card r"><i class="fa fa-check-square-o"></i>
<h5>Recovered Cases</h5><span id="recovered"></span>
</div>
<div class="card t"><i class="fa fa-eye"></i>
<h5>Total Testes Done</h5><span id="tests"></span>
</div>
<div class="card t"><i class="fa fa-eye"></i>
<h5>Recovery today</h5><span id="today"></span>
</div>
</div>
</div>
</body>
脚本:
<script type="text/javascript">
const sa = 'https://corona.lmao.ninja/v2/countries/sa';
const ye = 'https://corona.lmao.ninja/v2/countries/ye';
const fr = 'https://corona.lmao.ninja/v2/countries/fr';
const us = 'https://corona.lmao.ninja/v2/countries/us';
const uk = 'https://corona.lmao.ninja/v2/countries/uk';
const gr = 'https://corona.lmao.ninja/v2/countries/gr';
fetch(gr) // Here I want it to change when the user choose any of the countries options
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
document.getElementById("country").innerHTML = data.country;
document.getElementById("active").innerHTML = data.active.toLocaleString();
document.getElementById("cases").innerHTML = data.cases.toLocaleString();
document.getElementById("critical").innerHTML = data.critical.toLocaleString();
document.getElementById("death").innerHTML = data.deaths.toLocaleString();
document.getElementById("recovered").innerHTML = data.recovered.toLocaleString();
document.getElementById("tests").innerHTML = data.tests.toLocaleString();
document.getElementById("today").innerHTML = data.todayRecovered.toLocaleString();
document.getElementById("flag").src = data.countryInfo.flag;
});
</script>
您需要向select元素添加一个事件侦听器。
类似于:
const select = document.getElementById('countries');
select.addEventListener('change', () => {
// Then you'll need to map the values of the select field to a URL and use the right one.
fetch(URL)....
}
