JS基础 排他思想 变量 的问题

JS里面遇到的一个小问题

var btns = document.getElementsByTagName('button');

        for (var i = 0; i < btns.length; i++) {
            btns[i].onmouseover = function () {
                for (var j = 0; j < btns.length; j++) {
                    btns[j].onmouseout = function () {
                        this.style.backgroundColor = 'white';
                    }
                }
                this.style.backgroundColor = 'pink';
            }
        }

10-排他思想.html?_ijt=bj…vlheh1spj68ojtkc:20 Uncaught TypeError: Cannot read properties of undefined (reading 'style') at HTMLButtonElement.btns.<computed>.onmouseout (10-排他思想.html?_ijt=bj…eh1spj68ojtkc:20:33)

我把 btns[j] 改成了 this 就能成功了，不知道为啥

目的是要实现鼠标经过变色，移出还原

把var i = 0改成let i=0试试

跟下面这一篇是一样的问题，可以参考一下这个回答
https://ask.csdn.net/questions/7654616?answer=53706808&username=weixin_44691608&spm

1.用forEach(item,index)
2.使用for循环for(var i = 0;i < btns.length;i++){
btns[i].id = i;
}之后在里面再套一个for循环，判断btns[i].id和当前移入的是不是同一个，再用三目运算符添加样式
3.使用lfor循环(let i = 0;i < btns.length;i++)
4.使用回调函数，保存i