JavaScript闭包输出问题

Question

学习js一月有余，对于闭包问题仍然一头雾水，特来请教诸位大佬...
（祝诸位大佬升职加薪！）

var btn = document.querySelectorAll(".btngroup button");//一组按钮
var btn_style;
var temp = "";
var stat = document.getElementById("end");//按钮
var absent = document.getElementById("absent");//显示区域
for(var i = 0; i < btn.length;i++){
            btn_style = window.getComputedStyle(btn[i]);
            btn[i].onclick = changestyle;
            function changestyle (){
                if(btn_style.backgroundColor == "rgb(52, 173, 238)"){
                btn[i].style.backgroundColor = "orange";
                }
            }
        };
function unattendance(){
            for(var j = 0; j < btn.length; j++){
            if(btn_style.backgroundColor == "rgb(52, 173, 238)"){
                temp += " ";
                temp += btn[j].innerHTML;
                absent.innerText = temp;
                }
            }
        };
        

想要实现的效果是点击左侧蓝色按钮后变色，再点击下方红色结束考勤按钮（end），会在右边的显示区域中输出没有变色的按钮（即没有被点击的按钮），但是实际只会输出最后一个按钮的innerHTML值...
请大佬们不吝赐教呜呜呜

Answer 1

你这样直接在for循环里添加监听事件会导致所有按钮绑定的都是最后一个i

Answer 2

btn[i].onclick = changestyle;

1. 首先你要理解点击事件的内容是点击的时候才执行的，这一段代码只是定义，而不是执行了。
2. 然后试着想一下，点击的时候，就是执行了方法的内容了。而这个时候，for循环早就执行过了，即i就是 btn.length