這篇文章主要介紹了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程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
