JavaScript获取元素节点

获取到的元素节点为什么会变成undefined?

nav=document.querySelectorAll(".drag")
var click=[]
for(var i=0;i{
    console.log(nav[i])
    click[i]=nav[i].previousElementSibling
    click[i].onclick=function(){
        console.log(nav[i])
        if(nav[i].style.display=="none"){
            nav[i].style.display="block"
        }
        else{
            nav[i].style.display="none"
        }
    }
}

第一个console.log(nav[i])输出一个元素
第二个console.log(nav[i])输出Undefined
是这个点击事件有什么特殊的吗?
js的循环是怎么执行的,不是顺序吗,有点迷

变量用let声明试一下