JS基础——索引值应用2

来源:互联网 发布:已备案过期删除域名 编辑:程序博客网 时间:2024/06/16 02:17


[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>JS基础——索引值应用2</title>  
  6. <script>  
  7. window.onload = function(){  
  8.     var aBtn = document.getElementsByTagName('input');  
  9.     var aP = document.getElementsByTagName('p');  
  10.     var arr = ['孙悟空','孙悟饭','孙悟天'];  
  11.       
  12.     for(var i=0; i<aBtn.length; i++){  
  13.         // 想建立“匹配”“对应”关系,就用索引值  
  14.         aBtn[i].index = i;  
  15.         aBtn[i].onclick = function(){  
  16.             this.value = arr[this.index];  
  17.             aP[this.index].innerHTML = arr[this.index];   
  18.         };    
  19.     }     
  20. };  
  21. </script>  
  22. </head>  
  23.   
  24. <body>  
  25. <input type="button" value="按钮">  
  26. <input type="button" value="按钮">  
  27. <input type="button" value="按钮">  
  28. <p>11111</p>  
  29. <p>22222</p>  
  30. <p>33333</p>  
  31. </body>  
  32. </html>  

分析:

首先获取相关元素,然后循环遍历所有按钮,给每个按钮添加索引值,建立数组与按钮等元素的匹配对应关系,

接着点击按钮时,把当前索引值所对应的数组赋给当前点击的按钮,同时也赋给与之对应匹配的P。

0 0
原创粉丝点击