為什么部分功能無法運行？

Question

我正在編寫一個簡單的Web應用程序，以跟蹤和顯示一些數據。 我有多個html頁面，並且我有一些Javascript可控制html的功能。

問題在於下面的函數似乎並沒有一直運行。

我已經更改了工作流程的一般順序，並且完成了調試（據我所知）。

    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();

該代碼似乎一直運行，直到到達for循環為止。 console.log的不出現（ tag.ref不出現）如果我將代碼復制粘貼到chrome dev-tool上的控制台中，則元素更改的css可能會發生。

有任何想法嗎？

完整的代碼可以在我的GitHub上看到
或運行代碼的網站： 網站

Answer 1

您網站上的問題是側邊欄是異步獲取的。 您的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();

將sidebarColour的方法調用移到onreadystatechange的回調中應該可以修復該方法。
像這樣做：

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();