在for循环内创建变量，但在循环外访问该变量

Question

当使用循环创建元素并向其中添加类时，我应该首先在循环外声明变量吗？

例如：

const mainContainer = document.queryselector('.main-container');
const arr = [1,2,3,4,5];
arr.forEach((num)=> {
const newEl = document.createElement('div');
newEl.innerHtml = num;
mainContainer.appendChild(newEl);
newEl.addEventListener('click',()=> {
window.open('google.com')
})
})

这将打开5个新的选项卡，但我访问元素的唯一方法是在循环内，我应该在循环外延迟newEl并用let更改它吗？

Answer 1

是的，在循环中您正在调用一个函数。默认情况下，一旦函数退出/弹出，函数的作用域就会被终止，这意味着当函数退出时，变量将被取消设置，您将无法在函数之外访问它(甚至循环(。

对于您的代码，有一些错误已经纠正：

const mainContainer=document.queryselector('.main container'(；

const mainContainer = document.getElementsByClassName('main-container')[0];
const arr = [1,2,3,4,5];
arr.forEach((num)=> {
const newEl = document.createElement('div');
newEl.innerText = num;
mainContainer.appendChild(newEl);
console.log(mainContainer);
newEl.addEventListener('click',()=> {
window.open('google.com')
})
})

<div class="main-container"></div>

Answer 2

如果您想要引用您创建的元素，您可以执行：

const mainContainer = document.querySelector('.main-container');
const newEls = [1,2,3,4,5].map(num=> {
const newEl = document.createElement('div');
newEl.innerHtml = num;
mainContainer.appendChild(newEl);
newEl.addEventListener('click',()=> {
window.open('google.com')
});
return newEl;
})