javascript实现点击后变换按钮显示文字的方法

2024-05-06 16:20:05

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了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>