猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

HTML JS CSS 值未显示在列卡中

我对技术有点陌生。


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

        }

http://img2.mukewang.com/62d8bd7f00019d2c19130403.jpg

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



侃侃尔雅
浏览 161回答 2
2回答

泛舟湖上清波郎朗

发生这种情况是因为这条线document.getElementById('update').innerHTML = update.substr(0, 10);您没有带有 id 的元素update。JS 在该行崩溃。您需要注释该行或添加验证器以检查该元素是否存在。window.onload = function() {&nbsp; &nbsp; getCovidStats();}function getCovidStats() {&nbsp; &nbsp; fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/225')&nbsp; &nbsp; .then(function(resp) { return resp.json() })&nbsp; &nbsp; .then(function(data) {&nbsp; &nbsp; &nbsp; &nbsp; let population = data.location.country_population;&nbsp; &nbsp; &nbsp; &nbsp; let update = data.location.last_updated;&nbsp; &nbsp; &nbsp; &nbsp; let confirmedCases = data.location.latest.confirmed;&nbsp; &nbsp; &nbsp; &nbsp; let deaths = data.location.latest.deaths;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('population').innerHTML = population.toLocaleString('en');&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('percent').innerHTML = ((Number(deaths)/Number(confirmedCases))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "%";&nbsp; &nbsp; })&nbsp; &nbsp; .catch(function() {&nbsp; &nbsp; &nbsp; &nbsp; console.log("error");&nbsp; &nbsp; })&nbsp; &nbsp; setTimeout(getCovidStats, 43200000) // update every 12 hours}* {box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;h1{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: smaller;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Float four columns side by side */&nbsp; &nbsp; &nbsp; &nbsp; .column {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 25%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0 10px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Remove extra left and right margins, due to padding */&nbsp; &nbsp; &nbsp; &nbsp; .row {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 -5px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Clear floats after the columns */&nbsp; &nbsp; &nbsp; &nbsp; .row:after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: table;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clear: both;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Responsive columns */&nbsp; &nbsp; &nbsp; &nbsp; @media screen and (max-width: 600px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .column {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Style the counter cards */&nbsp; &nbsp; &nbsp; &nbsp; .card {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 16px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #f1f1f1;&nbsp; &nbsp; &nbsp; &nbsp; }<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1"></head><body>&nbsp; &nbsp; <h2>Responsive Column Cards</h2>&nbsp; &nbsp; <p>Resize the browser window to see the effect.</p>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Card 1</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Cases</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="population"></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Card 2</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Cases</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="cases"></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Card 3</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Cases</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="deaths"></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Card 4</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Cases</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="percent"></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></body></html>
0

杨魅力

您缺少一个 HTML 块。将此添加到人口数据下方的 HTML 中：<div class="column">&nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp;<h3>Card</h3>&nbsp; &nbsp; &nbsp;<h4>Cases</h4>&nbsp; &nbsp; &nbsp;<h1 id="update"></h1>&nbsp; &nbsp;</div></div>只是一个快速提示，您可以将 CSS 样式放在外部文件中并访问它，这样您的 HTML 文件就不会变得混乱。创建一个新文件 (style.css) 并复制所有 CSS 并粘贴到 style.css 中。然后添加<link rel="stylesheet" type="text/css" href="style.css">到 HTML 的头部。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript