zoukankan      html  css  js  c++  java
  • 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 {
                     600px;
                    height: 450px;
                    border: 1px solid black;
                }
                #div2 {
                     600px;
                    height: 50px;
                    border: 1px solid black;
                }
                input {
                    margin-left: 21px;
                     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

  • 相关阅读:
    Java:多线程<一>
    Java:Exception
    Java: 内部类
    Ubuntu安装jdk
    ubuntu搜狗拼音安装
    录音-树莓派USB摄像头话筒
    leetcode 最小栈
    leetcode 编辑距离 动态规划
    leetcode 最小覆盖字串
    leetcode 最长上升子序列 动态规划
  • 原文地址:https://www.cnblogs.com/chunyansong/p/12551688.html
Copyright © 2011-2022 走看看