JavaScript实现点击按钮动态切换文字显示
作者:闭包旅人时间:2026-10-29 09:40:10浏览:514
本文介绍如何使用JavaScript实现点击按钮后动态切换其显示文字的功能。通过遍历页面中的input元素,为所有type为button的元素绑定点击事件,点击时当前按钮文本变为“点了”,其余按钮文本变为“没点”。
JavaScript实现按钮文字动态切换
本文通过一个具体实例,展示了如何利用JavaScript实现点击按钮后动态切换按钮显示文字的功能。该方法可供读者参考学习,具体实现逻辑如下文所述。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>显示一些按钮,如果点击了,
当前点击的按钮文本变为“点了”,其他按钮文本变为“没点”</title>
<script type="text/javascript">
//为所有按钮动态添加事件
function IniButtonEvent() {
var Items = document.getElementsByTagName("input");
for (var i = 0; i < Items.length; i++) {
var objTmp = Items[i];
if (objTmp.type == "button") {
objTmp.onclick = ButtonClick;
}
}
}
function ButtonClick() {
var Items = document.getElementsByTagName("input");
for (var i = 0; i < Items.length; i++) {
var objTmp = Items[i];
if (objTmp.type == "button") {
//判断是否是按钮
//window.event.srcElement触发当前事件的元素
//用来判断是否是当前单击的按钮
if (objTmp == window.event.srcElement) {
objTmp.value = "点了";
}
else {
objTmp.value = "没点";
}
}
}
}
</script>
</head>
<body onload="IniButtonEvent()">
显示一些按钮,如果点击了,当前点击的按钮文本变为“点了”,
其他按钮文本变为“没点”<br />
<input type="button" value="没点" />
<input type="button" value="没点" />
<input type="button" value="没点" />
<input type="button" value="没点" />
<input type="button" value="没点" />
</body>
</html>
希望上述内容对读者在JavaScript程序设计方面的实践有所帮助。
作者最新文章
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
