0

我对技术有点陌生。

我正在尝试构建仪表板。但是当我将属性 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;
        }

        /* 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;
        }
    </style>
    <script type="text/javascript" src="app.js"></script>
</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>

值缺失

以上是我得到的。我需要在红框区域显示值。

4

2 回答 2

0

This happend because this line

document.getElementById('update').innerHTML = update.substr(0, 10);

you don't have an element with the id update. And JS crash in that line. You need to comment that line or add a validator to check if that element exist. 

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>

于 2020-04-28T14:57:16.277 回答
0

您缺少一个 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 的头部。

于 2020-04-28T15:05:09.767 回答