JavaScript点击事件换字体颜色

点击按钮可以换字体颜色 可以自己看看

   <div class="color">
        <button>red</button>
        <button>black</button>
        <button>yellow</button>
        <button>blue</button>
        <button>orange</button>
    </div>
    <button id="btn">设置颜色</button>
    <h1>HELLOW WORO</h1>

 <script>
        // 声明颜色数组
    var coloArr = ['red','black','yellow','blue','orange']
    var btns = document.querySelectorAll('.color>button');
    var btn = document.getElementById('btn');
    var text = document.getElementsByTagName('h1')[0];

    // 初始化样式
    btns[1].style.background = '#ccc'
    // 1 先点击btns 给每个颜色绑定点击事件
    for(var i = 0;i<btns.length;i++){
        // 给每个颜色按钮添加color属性 赋值为对应的颜色数组。
        btns[i].color = coloArr[i];

    
        // 当点击颜色按钮时候
        btns[i].onclick = function(){
            for(var j = 0;j<btns.length;j++){
                btns[j].style.background  = ''
            }
            // 获取选中按钮的[颜色属性]
            var color = this.color;
            // 给被选中的颜色按钮添加背景色
            this.style.background  = '#ccc'
            // 点击[设置颜色] 改变h1字体颜色
            btn.onclick = function(){
                text.style.color = color;
            }
        }
    }
    </script>