js動態給按鈕增加onclick的函數事件(帶參數)


當方法有參數時,用onclick = 方法名(參數)時就有錯了,需要在方法名前面加function()

<!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>

  該文章轉載處為:https://www.jianshu.com/p/652907af25e6


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM