首先,要想实现这个功能,必须要弄明白其中的原理,下面我将用图片展示:
一开始,默认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]这个按钮,所以点击是没有效果的。