js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件(帶參數(shù))
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
:js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件(帶參數(shù)) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //onclick事件傳入value值和id function bt1(value, id) { //判斷點(diǎn)擊的按鈕的id是否存在,不存在則創(chuàng)建,存在則alert if(!document.getElementById(id)) { //創(chuàng)建input元素 var inp = document.createElement("input"); inp.type = "button"; //傳入點(diǎn)擊按鈕的value值到新的按鈕 inp.value = value; //傳入點(diǎn)擊按鈕的id到新的按鈕(傳入是id+1防止重復(fù)) inp.id = id; //當(dāng)方法有參數(shù)時(shí),用onclick = 方法名(參數(shù))時(shí)就有錯(cuò)了,需要在方法名前面加function() inp.onclick = function() { b1(id); }; document.getElementById("div").appendChild(inp); } else { alert("已存在") } } function b1(id) { var flag = confirm("確認(rèn)刪除?"); 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="語(yǔ)文" onclick="bt1(this.value,this.id+1)" /> <input type="button" id="bt3" value="數(shù)學(xué)" onclick="bt1(this.value,this.id+1)" /> <input type="button" id="bt4" value="英語(yǔ)" onclick="bt1(this.value,this.id+1)" /> <input type="button" id="bt5" value="美術(shù)" onclick="bt1(this.value,this.id+1)" /> </div> </body> </html>
該文章在 2023/11/18 9:57:59 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |