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

  • 相关阅读:
    使用公钥和私钥实现LINUX下免密登录
    XML入门
    JSP页面中的errorPage属性和web.xml<error-page>标签的区别
    JAVA、TOMCAT环境变量配置
    在Eclipse Neon中导入serlvet-api等jar包
    56. Merge Intervals
    55. Jump Game
    34. Find First and Last Position of Element in Sorted Array
    33. Search in Rotated Sorted Array
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/chunyansong/p/12551688.html
Copyright © 2011-2022 走看看