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>