Почему не работает метод onload?

Пытаюсь добавить HTML элементы с сервера на HTML клиент в ф-ции getCards. Сначала пыталась добавлять без метода onload, но выдает ошибку - " Cannot set property 'innerHTML' of null "

server.js

const express = require('express');
const path = require('path');
const app = express();
const server = require('http').Server(app);
const fetch = require("node-fetch");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

//БД
const url = 'https://reqres.in/api/users';

//инициализация глобального окружения
global.document = new JSDOM(this.html).window.document;
global.window = new JSDOM(this.html).window;

async function getCards() {
    await fetch('https://reqres.in/api/users')
    .then(response => response.json())
    .then(json => {
        console.log(json.data);
        const cardsData = json.data.map(el => {
            return `
                <div class="col col--hidden" >
                    <div class="card">
                        <img src="${el.avatar}" class="card-img-top"  width="200" height="200" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">${el.first_name} ${el.last_name}</h5>
                            <p class="card-text">${el.email}</p>
                        </div>
                    </div>
                </div>
            `;
        });
        console.log(cardsData);
        
        window.onload = function() {
            console.log('Global is loaded');
            document.getElementById('cards').innerHTML = cardsData.join('');
        }
    });
}

app.get('/', async (req, res) => {
    res.sendFile(path.resolve('index.html'));
    await getCards();
});

server.listen(3000, (err) =>{
    if(err){
        throw Error(err);
    }
    console.log('Server is runnig');
});


HTML client

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Business Cards</title>
    <style>

        html {
            margin: 0 auto;
            margin-left: auto;
            margin-right: auto;
        }

        .col--hidden {
            display: none;
            margin: 5px 5px 5px 5px;
        }
        .row {
            margin-left: auto;
            margin-right: auto;
            align-items: center;
        }
        .card {
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            width: 250px;
            height: 300px;
        }
        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }

         .card-group {
            margin-top: 40px;
            margin-bottom: 40px;
        }
        .col {
            align-items: center;
            margin-left: auto;
            margin-right: auto;
        }
        #img {
            border-radius: 5px 5px 0 0;
        }

        .loadMore {
            margin-top: 40px;
            margin-bottom: 40px;
            width: 500px;
            border: 1px solid gray;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand mb-0 h1">Business Cards</span>
        </div>
    </nav>
    
    <div class="card-group justify-content-center">
        <div id="cards" class="row row-cols-2 row-cols-md-3"></div>
    </div>
    <a href="#" id="loadMore" class="loadMore"> Load More </a>

    <footer>
        <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
            © Nimchenko Anastasiya 2021
        </div>
    </footer>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $( document ).ready(function() {
            $(function(){
                $("#loadMore").on('click', function(e){
                    e.preventDefault();
                    $(".col--hidden").slice(0,3).slideDown().removeClass('col--hidden');

                    $(this).toggle();
                })})
        });
        //$(document).ready(JSONToCSVConvertor(cardsData));
    </script>
    </body>
</html>
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
document.getElementById('cards').innerHTML = ...

Если этот элемент еще не загружен, то вы получите ошибку Cannot set property 'innerHTML' of null, логично.

Если все уже загружено, и после этого вы добавляете обработчик window.onload, то он никогда не сработает, т.к. это событие уже произошло.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы