js动态添加input按钮并给按钮增加onclick的函数事件(带参数)
当前位置：知识管理交流
→『 技术文档交流 』
 ：js动态添加input按钮并给按钮增加onclick的函数事件(带参数) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //onclick事件传入value值和id function bt1(value, id) { //判断点击的按钮的id是否存在,不存在则创建,存在则alert if(!document.getElementById(id)) { //创建input元素 var inp = document.createElement("input"); inp.type = "button"; //传入点击按钮的value值到新的按钮 inp.value = value; //传入点击按钮的id到新的按钮(传入是id+1防止重复) inp.id = id; //当方法有参数时，用onclick = 方法名(参数)时就有错了，需要在方法名前面加function() inp.onclick = function() { b1(id); }; document.getElementById("div").appendChild(inp); } else { alert("已存在") } } function b1(id) { var flag = confirm("确认删除?"); if(flag) { document.getElementById(id).remove(); } } </script> <style type="text/css"> #div { width: 600px; height: 450px; border: 1px solid black; } #div2 { width: 600px; height: 50px; border: 1px solid black; } input { margin-left: 21px; width: 90px; height: 45px; } </style> </head> <body> <div id="div"></div>
<div id="div2"> <input type="button" id="bt1" value="体育" onclick="bt1(this.value,this.id+1)" /> <input type="button" id="bt2" value="语文" onclick="bt1(this.value,this.id+1)" /> <input type="button" id="bt3" value="数学" onclick="bt1(this.value,this.id+1)" /> <input type="button" id="bt4" value="英语" onclick="bt1(this.value,this.id+1)" /> <input type="button" id="bt5" value="美术" onclick="bt1(this.value,this.id+1)" /> </div> </body> </html>
该文章在 2023/11/18 9:57:59 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
