亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

HTML JS CSS 值未顯示在列卡中

HTML JS CSS 值未顯示在列卡中

侃侃爾雅 2022-07-21 10:43:39
我對技術有點陌生。我正在嘗試構建儀表板。但是當我將屬性 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>


查看完整回答
反對 回復 2022-07-21
?
楊魅力

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 的頭部。


查看完整回答
反對 回復 2022-07-21
  • 2 回答
  • 0 關注
  • 127 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號