JS基础——索引值应用2

来源:互联网 发布:淘宝关于退货运费规则 编辑:程序博客网 时间:2024/06/08 03:58
<!doctype html><html><head><meta charset="utf-8"><title>JS基础——索引值应用2</title><script>window.onload = function(){var aBtn = document.getElementsByTagName('input');var aP = document.getElementsByTagName('p');var arr = ['孙悟空','孙悟饭','孙悟天'];for(var i=0; i<aBtn.length; i++){// 想建立“匹配”“对应”关系,就用索引值aBtn[i].index = i;aBtn[i].onclick = function(){this.value = arr[this.index];aP[this.index].innerHTML = arr[this.index];};}};</script></head><body><input type="button" value="按钮"><input type="button" value="按钮"><input type="button" value="按钮"><p>11111</p><p>22222</p><p>33333</p></body></html>

分析:

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

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

0 0
原创粉丝点击