[英]Why part of function does not run?
我正在编写一个简单的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可能会发生。
有任何想法吗?
您网站上的问题是侧边栏是异步获取的。 您的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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.