快捷導(dǎo)航

js動態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件(帶參數(shù))完整實(shí)例

更新時間：2023年07月04日 08:50:51 作者：Future_Master_L

這篇文章主要介紹了js動態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件,結(jié)合完整實(shí)例形式分析了javascript頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

首先看看完整實(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ù)時，用onclick = 方法名(參數(shù))時就有錯了，需要在方法名前面加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></div>
        <div>
            <input type="button" value="體育" onclick="bt1(this.value,this.id+1)" />
            <input type="button" value="語文" onclick="bt1(this.value,this.id+1)" />
            <input type="button" value="數(shù)學(xué)" onclick="bt1(this.value,this.id+1)" />
            <input type="button" value="英語" onclick="bt1(this.value,this.id+1)" />
            <input type="button" value="美術(shù)" onclick="bt1(this.value,this.id+1)" />
        </div>
    </body>
</html>

補(bǔ)充：對于頁面上已經(jīng)存在的元素onclick事件，如果想動態(tài)修改，可以先使用removeAttribute方法將原始的onclick屬性移除，再通過addEventListener方法添加新的事件處理程序，簡單示例如下：

<button id="myButton" onclick="originalFunction()">點(diǎn)擊我</button>
<script>
  // 獲取按鈕元素
  var button = document.getElementById('myButton');
  // 移除原始的onclick屬性
  button.removeAttribute('onclick');
  // 添加新的點(diǎn)擊事件處理程序
  button.addEventListener('click', function() {
    // 在這里編寫新的點(diǎn)擊事件邏輯
    console.log('按鈕被點(diǎn)擊了');
  });
</script>

您可能感興趣的文章: