原生js实现按钮的排他功能???

1,287 阅读1分钟

首先,要想实现这个功能,必须要弄明白其中的原理,下面我将用图片展示:

一开始,默认5个盒子都是红色的,

当我点击某个盒子的时候,变成绿色

说到这里,很多人容易思维定式,以为点击1,1为绿色,然后点击2,让2变成绿色,再把1变成红色,这样的想法是好的,但是实现起来就太难了。

原理:

点击1,1为绿色,然后点击2的时候,其实做了两个操作。

(1)先遍历一下所有的盒子,将所有的盒子变成红色,

(2)再将当前点击的这个盒子变成绿色

<input type="button" value="快点我">
<input type="button" value="快点我">
<input type="button" value="快点我">
<input type="button" value="快点我">
<input type="button" value="快点我">


var btns = document.getElementsByTagName('input');
for(var i=0;i<btns.length;i++){
    btns[i].onclick=function(){
        for(var j=0;j<btns.length;j++){
            btns[j].value="快点我";
        }
        this.value="我被点啦!!!";
    }
}

注意:在以上代码中很多人容易入坑!!!

有的人会写btns[i].value="我被点啦!!!",然后就发现点的时候根本没有效果,

WHY?????

解释:

这是因为循环在页面加载完之后就执行完毕了,若有五个btn,则length为5,但是i的值最大为4,但是点击后,btns[i]中的i已经是4++之后了,已经是5了,但是页面中根本没有btns[5]这个按钮,所以点击是没有效果的。