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

这篇文章主要介绍了javascript实现点击后变换按钮显示文字的方法,可实现显示一些按钮如果点击了,按钮文本变为“点了”,其他按钮文本变为“没点”的效果,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了javascript实现点击后变换按钮显示文字的方法。分享给大家供大家参考。具体实现方法如下：

1. <html xmlns="http://www.w3.org/1999/xhtml"> 
2. <head> 
3. <title>显示一些按钮，如果点击了， 
4. 当前点击的按钮文本变为“点了”，其他按钮文本变为“没点”</title> 
5. <script type="text/javascript"> 
6. //为所有按钮动态添加事件 
7. function IniButtonEvent() { 
8. var Items = document.getElementsByTagName("input"); 
9. for (var i = 0; i < Items.length; i++) { 
10. var objTmp = Items[i]; 
11. if (objTmp.type == "button") { 
12. objTmp.onclick = ButtonClick; 
13. } 
14. } 
15. } 
16. function ButtonClick() { 
17. var Items = document.getElementsByTagName("input"); 
18. for (var i = 0; i < Items.length; i++) { 
19. var objTmp = Items[i]; 
20. if (objTmp.type == "button") { 
21. //判断是否是按钮 
22. //window.event.srcElement触发当前事件的元素 
23. //用来判断是否是当前单击的按钮 
24. if (objTmp == window.event.srcElement) { 
25. objTmp.value = "点了"; 
26. } 
27. else { 
28. objTmp.value = "没点"; 
29. } 
30. } 
31. } 
32. } 
33. </script> 
34. </head> 
35. <body onload="IniButtonEvent()"> 
36. 显示一些按钮，如果点击了，当前点击的按钮文本变为“点了”， 
37. 其他按钮文本变为“没点”<br /> 
38. <input type="button" value="没点" /> 
39. <input type="button" value="没点" /> 
40. <input type="button" value="没点" /> 
41. <input type="button" value="没点" /> 
42. <input type="button" value="没点" /> 
43. </body> 
44. </html> 

希望本文所述对大家的javascript程序设计有所帮助。