JS中循环按钮点击事件使用btn[i]会报错而使用this则不会报错

Question

<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

Answer 1

你外层已经循环i了，内层只要针对自己这一个标签修改就可以了不需要第二重循环；另外你代码的问题在于你用了var声明变量，所以整段代码的 i 指向的是同一个i，导致内循环退出的时候出错行访问到越界下标，可以去了解一下var作用域；如果改成let声明变量的话这段代码应该就不会报错了，不过两层循环依旧显得特别多余