js创建一个input数组并绑定click事件的方法


Posted in Javascript onJune 12, 2014
</pre><pre name="code" class="javascript"><html> 
<body> 
<input type="button" name="input[]" value="按钮1" /><br /> 
<input type="button" name="input[]" value="按钮2" /><br /> 
<input type="button" name="input[]" value="按钮3" /><br /> <div id="add"></div> 
</body> 
</html> 
<script type="text/javascript"> 
// 通过 getElementsByTagName 获得都有 input 控件 
var inputs =document.getElementsByTagName("input"); 
// 为第0个button绑定onclick事件,alert一下 
inputs[0].onclick = function(){ 
alert("我测试一下"); 
} 
// 为每一个button绑定onclick事件,alert一下 
for(var i=0;i<inputs.length;i++){ 
inputs[i].onclick = function(){ 
alert("我测试一下"); 
} 
} 
window.onload = function(){ 
// 定义一个数组 arrs 
var arrs = new Array(); 
// 循环添加 
for(var i=0;i<2;i++){ 
// 循环添加两个 input type="button" value="新增"+i 
var input = document.createElement("input"); 
input.type = "button"; 
input.value = "新增" + i; 
// 记得把创建的 input 放入 arrs 中 
arrs.push(input); 
// 然后把 input 放入 id="add" 的div中 
document.getElementById("add").appendChild(input); 
} 
// 同样用 [0].onclick 绑定事件,依然没有问题 
arrs[0].onclick=function(){ 
alert("我又测试一下"); 
} 
}
</script>
Javascript 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
vue的for循环使用方法
Feb 12 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 #Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 #Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 #Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 #Javascript
自己封装的javascript事件队列函数版
Jun 12 #Javascript
jquery动态添加删除一行数据示例
Jun 12 #Javascript
checkbox勾选判断代码分析
Jun 11 #Javascript
You might like
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python计算圆周率pi的方法
2015/07/11 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python使用RNN实现文本分类
2018/05/24 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
化工操作工岗位职责
2014/04/29 职场文书
2014年学习委员工作总结
2014/11/14 职场文书