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 相关文章推荐
js跳转页面方法实现汇总
Feb 11 Javascript
初识Node.js
Sep 03 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
微信小程序入门之绘制时钟
Oct 22 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
PHP 替换模板变量实现步骤
2009/08/24 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
js css自定义分页效果
2017/02/24 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Django与遗留的数据库整合的方法指南
2015/07/24 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python的re模块正则表达式操作
2016/05/25 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
银行反四风对照检查材料
2014/09/29 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
初中政治教师教学反思
2016/02/23 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python