setAttribute не находит идентификатор, который был загружен с jQuery

Question

Я пытаюсь добавить класс «активный» к элементу панели навигации после загрузки заголовка из другого файла html. Я пробовал различные способы заставить это работать, но ни один не был успешным. Я получаю сообщение об ошибке: «Uncaught TypeError: Невозможно прочитать свойство 'setAttribute' из null."

PS: у меня есть функции ready и onload только для того, чтобы попытаться убедиться, что они загружены в правильном порядке. Я пытался иметь оба в одном месте, но это все равно не сработало. console.logs показывают, что эти два элемента выполняются в правильном порядке.

Вот код:

$(document).ready(() => {
    let header = "http://ivanpenev.hopto.org/bootstrap/website/resources/header.html",
        footer = "http://ivanpenev.hopto.org/bootstrap/website/resources/footer.html";

    loadItems(header, footer);
});

window.onload = () => function() {
    let page = window.location.href.split("/").slice(-1)[0].split(".")[0]; //get file name
    active(page);
}

const loadItems = (header, footer) => {
    // Load the HTML contents of the header into <header>
    $('header').load(header);
    // Load the HTML contents of the footer into <footer>
    $('footer').load(footer);
    console.log('loaded');
}

const active = (page) => {
    console.log(page);

    document.getElementById(page).setAttribute('class', 'active');
}

вот файл html, загруженный в заголовок:

<nav class="navbar navbar-default">
    <div class="col-sm-2">
    </div>
    <div class="col-sm-8">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="index.html"><img src="images/logo.png" alt="LOGO" height="52" width="362"></a>
            </div>
            <ul class="navigation">
                <li id="index"><a href="index.html">Home</a></li>
                <li id="about"><a href="about.html">About</a></li>
                <li id="practices"><a href="practices.html">Practices</a></li>
                <li id="lawyers"><a href="lawyers.html">Our Lawyers</a></li>
                <li id="news"><a href="#">News</a></li>
                <li id="contact"><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="col-sm-2">
    </div>
</nav>

Любая помощь будет принята с благодарностью.

Answer 1

load является асинхронным. Это означает, что даже если они кажутся в правильном порядке, все, что делается внутри каждой функции, может произойти в любое время. Скорее всего, это закончится тем, что вы вызовете свою active функцию до того, как заголовок будет загружен.

Я бы предложил избавиться от вашей функции onload и поместить тот же код в функция обратного вызова асинхронной загрузки вашего заголовка. Это объясняется в .load () JQuery Документация

Обратный вызов просто делает что-то после загрузки была завершена.

$('header').load(header, function() {
    let page = window.location.href.split("/").slice(-1)[0].split(".")[0]; //get file name
    active(page);
 });