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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,383评论 2 17
  • 第一章 错误处理: 错误: 程序运行过程中,导致程序无法正常执行的现象(即bug) 现象: 程序一旦出错,默认会报...
    fastwe阅读 4,844评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,078评论 1 45
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,124评论 0 3
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,758评论 0 17