JS ----- 排他思想

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一种使用JavaScript实现的按钮点击事件，当点击任意一个初始文本为“完美”的按钮时，所有按钮的文本都会变为“完美”，而被点击的按钮文本则会变为“优秀”。通过遍历和事件绑定，实现了动态文本变化的功能。

    <!-- 需求：我点击完美变成优秀，点谁谁就变成优秀--其他不变  8颗星重点 -->
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">
    <input type="button" value="完美">

//看到这么多一样的，首先想到的就是遍历他，
//获取元素 --- 获取所有的input  getElementsByTagName 获取一个为数组
	var btnObjs = document.getElementsByTagName("input");
//第一层循环获所有的input，为input做点击事件
//对每个input做点击事件
 	btnObjs[i].onclick = function(){
// 第一件事：循环遍历所有的input，让他们都变成完美
	 for(var j = 0; j < btnObjs.length; j++){
 		 btnObjs[j].value = "完美";
                }
// 第二件事情：让自己 自身变成优秀--那就是this 自己自身的意思
         this.value = "优秀";
            }

        }