排他思想 - 爱码网

我们需要给所有按钮添加一个点击事件就需要用到排他思想需要做到点击当前的按钮改变当前按钮的颜色，并去除其他按钮的背景颜色，用来提升页面效果

1给五个按钮都添加一个点击事件
2获取所有的按钮元素
3需要点击事件清除所有的按钮的背景颜色
4然后把当前按钮的背景颜色改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <script type="text/javascript">
//            1给五个按钮都添加一个点击事件
//            2获取所有的按钮元素
//            3需要点击事件清除所有的按钮的背景颜色    
//            4然后把当前按钮的背景颜色改变
            
            
            var btn = document.getElementsByTagName("button")
            for(var i = 0; i < btn.length; i++){
                
                btn[i].onclick = function(){
                for(var i = 0; i<btn.length; i++){
                    btn[i].style.backgroundColor = "";
                    console.log(1)
                }
                this.style.backgroundColor = "pink";
                
            }
                
                }
        </script>
    </body>
</html>

页面效果：

排他思想