CODEWITHSUNDEEP
javascripthtmlcss
CleoSophie
CleoSophie

Reputation: 29

Include HTML is not working, what am I doing wrong?

I have a separate file for my navigationbar, so when there need to be w3 schools include HTML

But it is not working, I tried everything. Can someone please help me?

function includeHTML() {
    var z, i, elmnt, file, xhttp;
    /* Loop through a collection of all HTML elements: */
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("include-html");
        if (file) {
            /* Make an HTTP request using the attribute value as the file name: */
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4) {
                    if (this.status == 200) {elmnt.innerHTML = this.responseText;}
                    if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
                    /* Remove the attribute, and call this function once more: */
                    elmnt.removeAttribute("include-html");
                    includeHTML();
                }
            }
            xhttp.open("GET", file, true);
            xhttp.send();
            /* Exit the function: */
            return;
        }
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--Media-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Title -->
    <title>Cleo Boonstra</title>
    <script src="IncludeHTML.js" type="text/javascript"></script>
</head>

<body>
    <div include-html="NavigationBar.html"></div>

</body>
<script>
    includeHTML();
</script>

</html>

This is the error I get

On my other website, everything is working fine, I just copied the code. I just want to have every other HTML page of my site have the same navigation bar, without changing every single navigation bar on every page.

Upvotes: 1

Views: 2004

Answers (1)

CleoSophie
CleoSophie

Reputation: 29

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--Media-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

</head>

<body>
    <div data-includeHTML="NavigationBar.html"></div>
</body>
<script>
    $(document).ready(function () {
        $("div[data-includeHTML]").each(function () {
            $(this).load($(this).attr("data-includeHTML"));
        });
    });
</script>

</html>

Upvotes: 1

Related Questions