js实现改变多个按钮的内容ABCD 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var btn = document.getElementsByTagName('button');
            var arr = ['A', 'B', 'C', 'D'];
            // console.log(btn,arr);          

            for (var a = 0; a < btn.length; a++) {
                btn[a].idx = a;
                //我们在这里可以给每一个按钮添加一个自定义属性，用来记录点击当前按钮的次数
                btn[a].j = 0;
                btn[a].onclick = function () {
                    //每次点击，点击次数就自加一次
                    this.j++;
                    //如果次数变为4，就证明当前已经显示d，之后又点击了一次，就让次数重新归零
                    if(this.j==4){
                        this.j = 0;
                    }
                    //渲染按钮内容
                    this.innerText = arr[this.j];
                    // console.log(btn[this.idx]);
                   
                    // for (i = 0; i < arr.length; i++) {
                    //     arr[i].index = i;
                    //     btn[this.idx].innerHTML = arr[i];

                    // }
                   
                }

            }
        }




    </script>
</head>

<body>
    <button id="btn">A</button>
    <button id="btn">A</button>
    <button id="btn">A</button>
    <button id="btn">A</button>
    <button id="btn">A</button>
    <!-- <button id="b">A</button>
    <button id="c">A</button>
    <button id="D">A</button>
    <button id="D">A</button> -->
</body>

</html>

 

posted @ 2020-03-24 20:49  JackieDYH  阅读(3)  评论(0)  编辑  收藏  举报  来源