Why part of function does not run?

Question

I am writing a simple web app to keep track of, and display, some data. I have multiple html pages, and i have some Javascript to control functionality of the html.

The issue is that the below function does not seem to run all the way through.

I have altered the general ordering of the workflow, and I have done debugging (as far as I know how).

    function sidebarColour() {
        let page = document.getElementsByTagName('a');
        let currentURL = window.location.href;
        console.log(page, currentURL);
        for (let tag of page) {
            console.log(tag.href);
            if (tag.href == currentURL) {
                tag.className = 'bar-item button padding blue';
                console.log(tag.href, tag.className);
            } else {
                tag.className = 'bar-item button padding';
            }
        }
    }

    sidebarColour();

The code seems to run, until it reaches the for loop. The console.log 's do not appear ( tag.ref does not appear) If I copy-paste the code into the console on the chrome dev-tool, then the expected happens of the css for the element changing.

Any ideas?

The full code can be seen on my GitHub
Or the website where the code is running: Website

Answer 1

The problem on your website is that the sidebar is fetched asynchronously. You have the following code in your include.js :

function includeHTML() {
    let 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("w3-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("w3-include-html");
                    includeHTML();
                }
            }
            xhttp.open("GET", file, true);
            xhttp.send();
            /* Exit the function: */
            return;
        }
    }
}

function sidebarColour() {
    let page = document.getElementsByTagName('a');
    let currentURL = window.location.href;
    console.log(page, currentURL);
    for (let tag of page) {
        if (tag.href == currentURL) {
            tag.className = 'bar-item button padding blue';
            console.log(tag.href, tag.className)
        } else {
            tag.className = 'bar-item button padding';
        }
    }
}

includeHTML();
sidebarColour();

Moving the method call of sidebarColour into the callback of onreadystatechange should fix the method.
Do it like this:

function includeHTML() {
    let 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("w3-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;
                        sidebarColour();
                    }
                    if (this.status == 404) {
                        elmnt.innerHTML = "Page not found.";
                    }
                    /* Remove the attribute, and call this function once more: */
                    elmnt.removeAttribute("w3-include-html");
                    includeHTML();
                }
            }
            xhttp.open("GET", file, true);
            xhttp.send();
            /* Exit the function: */
            return;
        }
    }
}

function sidebarColour() {
    let page = document.getElementsByTagName('a');
    let currentURL = window.location.href;
    console.log(page, currentURL);
    for (let tag of page) {
        if (tag.href == currentURL) {
            tag.className = 'bar-item button padding blue';
            console.log(tag.href, tag.className)
        } else {
            tag.className = 'bar-item button padding';
        }
    }
}

includeHTML();