JS for循环内报错

for循环内嵌套onclick点击事件时只输出的最后的值问题及解决方案

利用for循环给每一个li添加点击后改变颜色的事件，但结果是只有最后一个li添加上了，其余的li都未添加上

报错信息

Uncaught TypeError:Cannot set property ‘style’ of undefined

var lis = document.getElementByTagName("li");
for(var i=0; len=lis.lenth,i<len; i++) {
 list[i].onclick = function() {
  lis[i].style.backgroundColor = "red";
 }
}

报错分析

该问题实际涉及了事件绑定、普通事件、for循环等多个知识点。
js代码从上自下，执行完毕后，li的onclick还没有触发，for循环已经转完！！！
而for循环没有自己的作用域！所以循环多次时，用的是同一个全局变量i！也就是在for循环转完后，这个全局变量已经变成了lis.lenth，所以点击触发事件时，才会只有lis.lenth表示的最后一个li成功，最后改进代码为

let lis = document.getElementByTagName("li");
function foo(){
	for(let i=0; len=lis.lenth,i<len; i++) {
	 list[i].onclick = function() {
	  lis[i].style.backgroundColor = "red";
	 }
	}
};
foo();