当从我的 JS 文件登录控制台时,为什么我的节点列表包含 0 个项目?
Why does my nodelist contain 0 items when console logged from my JS file?
我关心的JS代码是这样的:
const modals=document.querySelectorAll('.modal');
const modalsArray=[...modals];
console.log(modalsArray);
document.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
if (e.target.classList.contains("item")) {
itemIndex=e.target.classList.item(1);
const modals=document.querySelectorAll('.modal');
const modalsArray=[...modals];
console.log(itemIndex);
console.log(modalsArray);
modalsArray.filter(function (modal) {
if (modal.classList.item(1)===itemIndex) {
modal.classList.add('on');
modalContainer.classList.remove('off');
modalContainer.classList.add('on');
}
})
}
});
const arrow=document.querySelectorAll('.arrow');
const arrowArray=[...arrow];
console.log(arrowArray);
每当我从我的 JS 文件中控制台记录 modalsArray 或 arrowArray 时,该数组显示为空。但我发现,如果我在控制台中从头开始编写代码来制作数组,那么数组中的所有项目都会正确显示。
那么为什么会这样呢?为什么当前在我的控制台上显示一个空数组?它与范围有关吗?
当我将 modalsArray 放入事件监听器中并单击相应的目标时,一个数组将正确显示,并且该事件监听器中的其余代码也能正常工作。
我注意到 arrowArray 有同样的问题,并意识到这两个元素有同样的问题。我想我应该问一下,因为肯定有事情发生。
那么,为什么图中的这两个元素都显示一个空数组?
查看我的 fiddle 了解更多信息:
https://jsfiddle.net/apasric4/kvs25wbL/3/
您的控制台语句甚至在获取数据之前就已在执行。我将它们链接到另一个 "then" 函数(承诺链接)中,如下所示。这样你的控制台语句 运行 在你的结果被解析为 hmtl.
https://jsfiddle.net/v83zqofp/1/
function generateHTML (data) {
fetchData(data)
.then(function(data){
let results=data.results;
return results.map(function(result,index){
-------------
main.lastElementChild.insertAdjacentHTML('afterend', html);
modalContainer.insertAdjacentHTML('beforeend', overlayHtml);
})
}).then (function (data) {
const modals=document.querySelectorAll('.modal');
const modalsArray=[...modals];
console.log(modalsArray);
const arrow=document.querySelectorAll('.arrow');
const arrowArray=[...arrow];
console.log(arrowArray);
})
}
我关心的JS代码是这样的:
const modals=document.querySelectorAll('.modal');
const modalsArray=[...modals];
console.log(modalsArray);
document.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
if (e.target.classList.contains("item")) {
itemIndex=e.target.classList.item(1);
const modals=document.querySelectorAll('.modal');
const modalsArray=[...modals];
console.log(itemIndex);
console.log(modalsArray);
modalsArray.filter(function (modal) {
if (modal.classList.item(1)===itemIndex) {
modal.classList.add('on');
modalContainer.classList.remove('off');
modalContainer.classList.add('on');
}
})
}
});
const arrow=document.querySelectorAll('.arrow');
const arrowArray=[...arrow];
console.log(arrowArray);
每当我从我的 JS 文件中控制台记录 modalsArray 或 arrowArray 时,该数组显示为空。但我发现,如果我在控制台中从头开始编写代码来制作数组,那么数组中的所有项目都会正确显示。
那么为什么会这样呢?为什么当前在我的控制台上显示一个空数组?它与范围有关吗?
当我将 modalsArray 放入事件监听器中并单击相应的目标时,一个数组将正确显示,并且该事件监听器中的其余代码也能正常工作。
我注意到 arrowArray 有同样的问题,并意识到这两个元素有同样的问题。我想我应该问一下,因为肯定有事情发生。
那么,为什么图中的这两个元素都显示一个空数组?
查看我的 fiddle 了解更多信息: https://jsfiddle.net/apasric4/kvs25wbL/3/
您的控制台语句甚至在获取数据之前就已在执行。我将它们链接到另一个 "then" 函数(承诺链接)中,如下所示。这样你的控制台语句 运行 在你的结果被解析为 hmtl.
https://jsfiddle.net/v83zqofp/1/
function generateHTML (data) {
fetchData(data)
.then(function(data){
let results=data.results;
return results.map(function(result,index){
-------------
main.lastElementChild.insertAdjacentHTML('afterend', html);
modalContainer.insertAdjacentHTML('beforeend', overlayHtml);
})
}).then (function (data) {
const modals=document.querySelectorAll('.modal');
const modalsArray=[...modals];
console.log(modalsArray);
const arrow=document.querySelectorAll('.arrow');
const arrowArray=[...arrow];
console.log(arrowArray);
})
}