HTML JS CSS Значение не отображается в карточках столбцов - PullRequest
Новая
       5

HTML JS CSS Значение не отображается в карточках столбцов

0 голосов
/ 28 апреля 2020

Я немного новичок в технологии.

Я пытаюсь создать панель мониторинга. Но когда я передаю идентификатор атрибута картам, он не отображает значения.

Иногда я получаю значение только для 1-й карты . Должен ли я добавить дополнительный 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>

value missing

выше, как я получаю. Мне нужно отобразить значения в красных областях в штучной упаковке.

Ответы [ 3 ]

0 голосов
/ 28 апреля 2020

Ваш HTML Кажется, один столбец отсутствует 

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;
		document.getElementById('update').innerHTML = update;
		document.getElementById('cases').innerHTML = confirmedCases;
		document.getElementById('deaths').innerHTML = deaths;
		document.getElementById('percent').innerHTML = ((Number(deaths)/Number(confirmedCases))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "%";

	})
	.catch(function(e) {
		console.log(e);
	})
	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 1</h3>

                <h4>Cases</h4>
                <h1 id="update"></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>
0 голосов
/ 28 апреля 2020

Вам не хватает блока HTML. Добавьте это к вашим HTML ниже данных о населении: 

<div class="column">
   <div class="card">
     <h3>Card</h3>
     <h4>Cases</h4>
     <h1 id="update"></h1>
   </div>
</div>

Просто быстрые советы, вы можете поместить свои стили CSS во внешний файл и получить к нему доступ, чтобы ваш HTML файл выиграл не запутаться Создайте новый файл (стиль. css), скопируйте все свои CSS и вставьте в стиль. css. Затем добавьте <link rel="stylesheet" type="text/css" href="style.css"> к заголовку HTML.

0 голосов
/ 28 апреля 2020

Это произошло потому, что в этой строке

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

у вас нет элемента с идентификатором update. И JS cra sh в этой строке. Вам необходимо прокомментировать эту строку или добавить валидатор, чтобы проверить, существует ли этот элемент. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...