gpt4 book ai didi

javascript - 如何从选择器到 json 文档进行选择?

转载 作者:行者123 更新时间:2023-12-02 21:12:16 25 4
gpt4 key购买 nike

如何才能在下拉菜单中选择一个国家/地区并获取该国家/地区的数据?国家/地区代码:

Netherlands 169

Germany 120

France 116

Spain 225

Italy 137

Russia 187

South-Korea 143

USA 201

(在获取函数中,荷兰的国家代码为 169,德国等国家代码应为 120)

window.onload = function() {
getCovidStats();
}

function getCovidStats() {
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/169')
.then(function(resp) { return resp.json() })
.then(function(data) {
let population = data.location.country_population;
let update = data.location.last_updated;
let confirmedCases = data.location.latest.confirmed;
let deaths = data.location.latest.deaths;

document.getElementById('population').innerHTML = population.toLocaleString('en');
document.getElementById('update').innerHTML = update.substr(0, 10);
document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');
document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');
document.getElementById('percent').innerHTML = ((Number(deaths)/Number(confirmedCases))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "%";




})
.catch(function() {
console.log("error");
})
setTimeout(getCovidStats, 43200000) // update every 12 hours
}
* {
margin: 0;
padding: 0;
}

html {
height: 100%;
width: 100%;
}
h1, h2 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
padding-bottom: 20px;
font-size: 250%;
}

.title {
background: linear-gradient(to right, #feb47b, #ff7e5f);
padding: 20px;
}

.subtitle {
padding: 20px;
font-size: 150%;
}

div {
padding: 20px;
}

.stats-container {
text-align: center;
float: right;
display: inline-block;
}
.location-container {
display: inline-block;
}
.data-container {
border: 2px solid #feb47b;
margin-right: 30%;
margin-left: 30%;

}
h4 {
font-size: 85%;
color: gray;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 5px;
}
.footer {
font-family: 'Roboto', sans-serif;
bottom: 0;
font-size: 75%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Name</title>

<link rel="shortcut icon" href="masker-emoji.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="app.js"></script>

</head>
<body>
<h1 class="title">Coronavirus Stats.</h1>
<h2 class="subtitle">Subtitle</h2>
<div class="data-container">
<div class="stats-container">
<h4>Tested positive</h4>
<h1 id="cases"></h1>
<h4>Deaths</h4>
<h1 id="deaths"></h1>
<h4>Death percentage</h4>
<h1 id="percent"></h1>
</div>
<div class="location-container">
<h4>Land</h4>
<h1 id="country"><label for="Country">Country:</label>
<select id="cars">
<option value="Netherlands">Netherlands</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
<option value="Russia">Russia</option>
<option value="South-Korea">South-Korea</option>
<option value="USA">USA</option>
</select></h1>
<h4>Population</h4>
<h1 id="population"></h1>
<h4>Last update on</h4>
<h1 id="update"></h1>
</div>
</div>
<h1 class="footer">Footer</h1>
</body>
</html>

最佳答案

像这样

在选择时使用 addEventListener 并将值更改为数字。

我添加了“请选择”

并将 ID 从 cars 更改为 <select id="countrySel">

window.addEventListener("load",function() {
document.getElementById("countrySel").addEventListener("change",getCovidStats);
document.getElementById("countrySel").value="169";
getCovidStats()
})

function getCovidStats() {
const cc = document.getElementById("countrySel").value;
if (cc==="") return;

fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/'+cc)
.then(function(resp) {
return resp.json()
})
.then(function(data) {
let population = data.location.country_population;
let update = data.location.last_updated;
let confirmedCases = data.location.latest.confirmed;
let deaths = data.location.latest.deaths;

document.getElementById('population').innerHTML = population.toLocaleString('en');
document.getElementById('update').innerHTML = update.substr(0, 10);
document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');
document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');
document.getElementById('percent').innerHTML = ((Number(deaths) / Number(confirmedCases)) * 100).toLocaleString("en", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}) + "%";
})
.catch(function() {
console.log("error");
})
setInterval(getCovidStats, 43200000) // update every 12 hours
}
* {
margin: 0;
padding: 0;
}

html {
height: 100%;
width: 100%;
}

h1,
h2 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
padding-bottom: 20px;
font-size: 250%;
}

.title {
background: linear-gradient(to right, #feb47b, #ff7e5f);
padding: 20px;
}

.subtitle {
padding: 20px;
font-size: 150%;
}

div {
padding: 20px;
}

.stats-container {
text-align: center;
float: right;
display: inline-block;
}

.location-container {
display: inline-block;
}

.data-container {
border: 2px solid #feb47b;
margin-right: 30%;
margin-left: 30%;
}

h4 {
font-size: 85%;
color: gray;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 5px;
}

.footer {
font-family: 'Roboto', sans-serif;
bottom: 0;
font-size: 75%;
padding: 5px;
}
<!DOCTYPE html>
<html>

<head>
<title>Name</title>

<link rel="shortcut icon" href="masker-emoji.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="app.js"></script>

</head>

<body>
<h1 class="title">Coronavirus Stats.</h1>
<h2 class="subtitle">Subtitle</h2>
<div class="data-container">
<div class="stats-container">
<h4>Tested positive</h4>
<h1 id="cases"></h1>
<h4>Deaths</h4>
<h1 id="deaths"></h1>
<h4>Death percentage</h4>
<h1 id="percent"></h1>
</div>
<div class="location-container">
<h4>Country</h4>
<h1 id="country"><label for="countrySel">Country:</label>
<select id="countrySel">
<option value="">Please select</option>
<option value="169">Netherlands</option>
<option value="120">Germany</option>
<option value="116">France</option>
<option value="225">Spain</option>
<option value="137">Italy</option>
<option value="187">Russia</option>
<option value="143">South-Korea</option>
<option value="201">USA</option>
</select>
</h1>
<h4>Population</h4>
<h1 id="population"></h1>
<h4>Last update on</h4>
<h1 id="update"></h1>
</div>
</div>
<h1 class="footer">Footer</h1>
</body>

</html>

关于javascript - 如何从选择器到 json 文档进行选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61058618/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com