就上线循环中,getElementsByClassName
找不到元素,因为loadhtml
功能是一个AJAX调用。的JavaScript与异步功能
如何使用异步函数或ES6发电机或承诺,为了使getElementsByClassName
最后一行的工作?
TotalArticleNumber = 3;
for (let i = TotalArticleNumber; i > 0; i--) {
loadhtml('./article/test' + i + '.md', function(e) {
sdf(i, e);
});
};
function loadhtml(url,callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if(xhttp.status == 200){
var response = xhttp.responseText;
(callback)(response);
}
};
};
xhttp.open("GET", url, true);
xhttp.send();
};
function sdf(i, e) {
var node = document.createElement("DIV");
var node1 = document.createElement("A");
var node2 = document.createElement("H1");
var node3 = document.createElement("P");
node.setAttribute('class', 'articleInner');
node1.setAttribute('class', 'openArticle');
node2.setAttribute('class', 'title');
node2.setAttribute('id', i);
node2.innerHTML = e.match(re);
node3.innerHTML = converter.makeHtml(e.replace(re1, ""));
node1.appendChild(node2);
node1.appendChild(node3);
node.appendChild(node1);
document.getElementById('articleContent').appendChild(node);
}
Array.prototype.forEach.call(document.getElementsByClassName('title'), function(item) {
item.addEventListener('click', function() {
document.getElementById('realArticle').style.display = 'block';
document.body.style.background = 'gray';
})
})
你需要promisify的loadhtml函数或建立在'fetch'之上。 –
你可以添加'loadhtml'的代码吗? – Quill
为什么不简单地将事件处理程序添加到'node2'?您不需要任何'getElementsByClassName'选择,并且在创建所有元素之后不需要计时。 – Bergi