<div>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<input type="button" value="按钮4">
<input type="button" value="按钮5">
</div>
<script>
var btn = document.getElementsByTagName("input");
for(var i =0;i<btn.length;i++){
btn[i].onclick = function(){
for(var i =0;i<btn.length;i++){
btn[i].style.backgroundColor = "";
}
btn[i].style.backgroundColor = "red"; //出错行
// this.style.backgroundColor = "red"; // 改成this则不会报错
}
}
</script>
为什么用this可以，而用btn[i]则会报错？
报错原因：
awd.html:24 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at HTMLInputElement.btn..onclick
你外层已经循环i了，内层只要针对自己这一个标签修改就可以了不需要第二重循环；另外你代码的问题在于你用了var声明变量，所以整段代码的 i 指向的是同一个i，导致内循环退出的时候出错行访问到越界下标，可以去了解一下var作用域；如果改成let声明变量的话这段代码应该就不会报错了，不过两层循环依旧显得特别多余
因为它用的i是内循环的i，数组越界了
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！