排他思想中Uncaught TypeError: Cannot read properties of undefined的解决方案

今天在做排他思想练习的时候发现了这个问题，我的完整代码如下：

var btns = document.querySelector('.box').getElementsByTagName('input');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                //把所有的样式都清空
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';
                }
                //设置自己的样式
                btns[i].style.backgroundColor = 'pink';
            }
        }

用chrome调试发现，外层for循环先对所有的button绑定onclick，绑定完之后，i的值已经变成了btns.length。接下来进入函数体执行内层for循环，清除所有元素的背景色。
清除之后，跳出内层for循环，对当前鼠标点击的button的样式进行设置。

解决方案1

设置自己样式时，把btns[i]改为this。

原因
跳出内层循环，对当前鼠标点击的button样式进行设置时，这时如果使用btns[i]，i的值已经变成了btns.length，不存在此下标的button，也就是找不到这个button对应的style，故报此错误。

解决方案2

把外循环的循环变量i的数据类型改为let

原因
当i=btns.length的时候，跳出了外层for循环，i变为块级元素，进入function内。但是btns伪元素数组的下标只到length-1，即在function里找不到下标为length的button，故报此错误。
直接声明i的类型为let，即把i声明为块局域变量。
（这里我也暂时还没理清楚是为什么，但是此方法确实可行）