我对技术有点陌生。我正在尝试构建仪表板。但是当我将属性 id 传递给卡片时。它没有显示值。有时我只获得第一张卡的价值。我必须添加额外的 div 吗？或任何其他方式？如何解决这些？window.onload = function() { getCovidStats();}function getCovidStats() { fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/225') .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}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>* {box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } h1{ font-size: smaller; } /* Float four columns side by side */ .column { float: left; width: 25%; padding: 0 10px; } /* Remove extra left and right margins, due to padding */ .row { margin: 0 -5px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; }以上是我得到的。我需要在红框区域显示值。
2 回答
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
发生这种情况是因为这条线
document.getElementById('update').innerHTML = update.substr(0, 10);
您没有带有 id 的元素update。JS 在该行崩溃。您需要注释该行或添加验证器以检查该元素是否存在。
window.onload = function() {
getCovidStats();
}
function getCovidStats() {
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/225')
.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('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
}
* {box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-size: smaller;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<div class="card">
<h3>Card 1</h3>
<h4>Cases</h4>
<h1 id="population"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<h4>Cases</h4>
<h1 id="cases"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<h4>Cases</h4>
<h1 id="deaths"></h1>
</div>
</div>
<div class="column">
<div class="card">
<h3>Card 4</h3>
<h4>Cases</h4>
<h1 id="percent"></h1>
</div>
</div>
</div>
</body>
</html>
杨魅力
TA贡献1811条经验 获得超6个赞
您缺少一个 HTML 块。将此添加到人口数据下方的 HTML 中：
<div class="column">
<div class="card">
<h3>Card</h3>
<h4>Cases</h4>
<h1 id="update"></h1>
</div>
</div>
只是一个快速提示，您可以将 CSS 样式放在外部文件中并访问它，这样您的 HTML 文件就不会变得混乱。创建一个新文件 (style.css) 并复制所有 CSS 并粘贴到 style.css 中。然后添加<link rel="stylesheet" type="text/css" href="style.css">到 HTML 的头部。
添加回答
举报
0/150
提交
取消