javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js动态添加input按钮并增加onclick函数事件

js动态添加input按钮并给按钮增加onclick的函数事件(带参数)完整实例

作者:Future_Master_L

这篇文章主要介绍了js动态添加input按钮并给按钮增加onclick的函数事件,结合完整实例形式分析了javascript页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

首先看看完整实例:

<!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></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="数学" onclick="bt1(this.value,this.id+1)" />
            <input type="button" value="英语" onclick="bt1(this.value,this.id+1)" />
            <input type="button" value="美术" onclick="bt1(this.value,this.id+1)" />
        </div>
    </body>
</html>

补充:对于页面上已经存在的元素onclick事件,如果想动态修改,可以先使用removeAttribute方法将原始的onclick属性移除,再通过addEventListener方法添加新的事件处理程序,简单示例如下:

<button id="myButton" onclick="originalFunction()">点击我</button>
<script>
  // 获取按钮元素
  var button = document.getElementById('myButton');
  // 移除原始的onclick属性
  button.removeAttribute('onclick');
  // 添加新的点击事件处理程序
  button.addEventListener('click', function() {
    // 在这里编写新的点击事件逻辑
    console.log('按钮被点击了');
  });
</script>
您可能感兴趣的文章:
阅读全文