小案例点击按钮改变div的背景颜色点谁弹谁的行数

点击按钮改变div的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box{
        width:100px;
        height: 100px;
    }
    </style>
</head>

<body>
    <div id='box' style='background:red'></div>
    <button>红</button>
    <button>绿</button>
    <button>蓝</button>
</body>
<script>
    var box=document.querySelector('#box');
    var btnList=document.querySelectorAll('button');
    var colorAry=['red','green','blue'];
    
    // for(let i=0;i<btnList.length;i++){
    //     btnList[i].onclick=function(){
    //         box.style.background=colorAry[i];
    //     }
    // }

        //注意return 以及 传参
    // for(var i=0;i<btnList.length;i++){
    //     btnList[i].onclick = (function(i){
    //         return function(){
    //             box.style.background=colorAry[i]
    //         }
    //     })(i)
    // }

    //因为要点 按钮 所以要把btnList类数组 转成 数组
    [...btnList].forEach((item,index)=>{
        item.onclick = function(){
            box.style.background=colorAry[index]
        }
    })

</script>

点谁弹谁的行数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>1Emmm</button>
    <button>2Emmm</button>
    <button>3Emmm</button>
    <button>4Emmm</button>
    <button>5Emmm</button> 
</body>
</html>
<script>
    var btns = document.querySelectorAll('button');
    // for(var i = 0; i < btns.length ; i++){
    //     btns[i].onclick = (function (n) {
    //         return function () {
    //             alert(`我是第${n+1}个button`)
    //         }
    //     })(i)
    // }

    // [...btns].forEach((item,index)=>{
    //     item.onclick = function(){
    //         alert(`我是第${index+1}个button`)
    //     }
    // })
    
for(let i = 0; i < btns.length ; i++){
    btns[i].onclick = function(){
    alert(`我是第${i+1}行`)
    }
    }

</script>