Heim > Artikel > Web-Frontend > javascript实现点击后变换按钮显示文字的方法_javascript技巧
javascript实现点击后变换按钮显示文字的方法_javascript技巧
- WBOYOriginal
- 2016-05-16 15:59:281381Durchsuche
本文实例讲述了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程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：javascript实现table表格隔行变色的方法_javascript技巧Nächster Artikel：jQuery构造函数init参数分析_jquery