javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法
本文實(shí)例講述了javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>顯示一些按鈕,如果點(diǎn)擊了, 當(dāng)前點(diǎn)擊的按鈕文本變?yōu)椤包c(diǎn)了”,其他按鈕文本變?yōu)椤皼]點(diǎn)”</title> <script type="text/javascript"> //為所有按鈕動(dòng)態(tài)添加事件 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觸發(fā)當(dāng)前事件的元素 //用來判斷是否是當(dāng)前單擊的按鈕 if (objTmp == window.event.srcElement) { objTmp.value = "點(diǎn)了"; } else { objTmp.value = "沒點(diǎn)"; } } } } </script> </head> <body onload="IniButtonEvent()"> 顯示一些按鈕,如果點(diǎn)擊了,當(dāng)前點(diǎn)擊的按鈕文本變?yōu)椤包c(diǎn)了”, 其他按鈕文本變?yōu)椤皼]點(diǎn)”<br /> <input type="button" value="沒點(diǎn)" /> <input type="button" value="沒點(diǎn)" /> <input type="button" value="沒點(diǎn)" /> <input type="button" value="沒點(diǎn)" /> <input type="button" value="沒點(diǎn)" /> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js菜單點(diǎn)擊顯示或隱藏效果的簡(jiǎn)單實(shí)例
- Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼
- js點(diǎn)擊頁面其它地方將某個(gè)顯示的DIV隱藏
- vueJS簡(jiǎn)單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】
- javascript點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換效果
- Js實(shí)現(xiàn)當(dāng)前點(diǎn)擊a標(biāo)簽變色突出顯示其他a標(biāo)簽回復(fù)原色
- JS/jQuery實(shí)現(xiàn)默認(rèn)顯示部分文字點(diǎn)擊按鈕顯示全部?jī)?nèi)容
- js實(shí)現(xiàn)的點(diǎn)擊超鏈顯示隱藏層
- JAVASCRIPT 點(diǎn)擊顯示 隱藏層
- js實(shí)現(xiàn)二級(jí)菜單點(diǎn)擊顯示當(dāng)前內(nèi)容效果
相關(guān)文章
Javascript設(shè)計(jì)模式之觀察者模式(推薦)
觀察者模式有時(shí)也稱為發(fā)布--訂閱模式,在觀察者模式中,有一個(gè)觀察者可以管理所有的目標(biāo),等到有狀態(tài)發(fā)生改變的時(shí)候發(fā)出通知2016-03-03在JavaScript中遭遇級(jí)聯(lián)表達(dá)式陷阱
在JavaScript中遭遇級(jí)聯(lián)表達(dá)式陷阱...2007-03-03javascript合并兩個(gè)數(shù)組最簡(jiǎn)單的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript合并兩個(gè)數(shù)組最簡(jiǎn)單的實(shí)現(xiàn)方法,方法很簡(jiǎn)單,有需要的朋友們可以學(xué)習(xí)下。2019-09-09JavaScript實(shí)現(xiàn)圖片輪播的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片輪播的方法,使用純javascript實(shí)現(xiàn)圖片輪播切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07uniapp實(shí)現(xiàn)可滑動(dòng)選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)可滑動(dòng)選項(xiàng)卡,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10關(guān)于JavaScript的單雙引號(hào)嵌套問題
單引號(hào)和雙引號(hào)之間可以相互嵌套。接下來通過本文給大家介紹JavaScript的單雙引號(hào)嵌套問題 ,感興趣的朋友一起看看吧2017-08-087個(gè)讓JavaScript變得更好的注意事項(xiàng)
這篇文章主要介紹了7個(gè)讓JavaScript變得更好的注意事項(xiàng),十分詳盡,需要的朋友可以參考下2015-01-01