记一次小实验，打算根据所点击 li 修改 body 背景图片
<ul>
<li><img src="img/1.jpg" ></li>
<li><img src="img/2.jpg" ></li>
<li><img src="img/3.jpg" ></li>
<li><img src="img/4.jpg" ></li>
</ul>
<script>
var btns = document.querySelectorAll(‘li‘);
var pic = document.querySelectorAll(‘img‘);
for (var i = 0; i < btns.length; i++) {
pic[i].onclick = function () {
document.body.style.background = ‘url(‘ + this.src + ‘)‘;
console.log(pic[i]); //局部变量，var 在 for内
}
console.log(pic[i]);
}
</script>
一开始的时候，获取元素后要在事件内部继续获得内部值，发现要用this指定指向dom，不可用变量指定
pic[i].onclick = function () {
document.body.style.background = ‘url(‘ + this.src + ‘)‘; //可行
}
pic[i].onclick = function () {
document.body.style.background = ‘url(‘ + pic[i].src + ‘)‘; //打印后发现未定义pic[i]
}
原本以为是onclick后pic[i]的指向变了，然后打印了一下pic，发现pic是存在的
再在for里面打印pic[i]发现是正常的，然后我才意识到var是for内局部变量
谨记js的奇葩之处
原文：https://www.cnblogs.com/jacky02/p/15160108.html