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

最新推荐文章于 2024-04-28 17:52:26 发布
最新推荐文章于 2024-04-28 17:52:26 发布
阅读量6.1w 收藏 28
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40321535/article/details/78686526
版权 
<!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>
Future_Master_L
关注
  • 4
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
input onclick事件_JavaScript学习笔记（十五）-- Event事件（上）
weixin_39598796的博客
12-01 980
EVENT（上）之前我们简单的了解过一些事件，比如 onclick / onload / onscroll / ...今天开始，我们详细的学习一些 事件什么是事件一个事件由什么东西组成触发谁的事件：事件源触发什么事件：事件类型触发以后做什么：事件处理函数var 我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面var 当我们点击 div 的时候，就会执行事件处理函数内部...
js添加input按钮并给按钮增加onclick事件
Youthenen的博客
03-03 5353
方法不带参数时直接用 input.οnclick=方法名 即可，不用加引号。 var height=window.innerHeight; var width=window.innerWidth; var input=document.createElement("input"); input.type="button"; input.value="你好"; document.body.appendChild(input); //方法不带参数
动态添加单个 input 框
最新发布
pig_ning的博客
04-28 253
动态添加单个 input 框
js动态添加input按钮并给按钮增加onclick的函数事件带参数
ct637337的博客
09-24 2万+
js中动态给单元格增加一个input按钮，table的id=“pagelist" var nRow = $("pagelist").insertRow("此处为第几行：如3--->第三行添加"); nRow.className = "tableContent1"; nRow.insertCell(){ innerHTML = ""; onclick = new Function("arg
input javascript 之 onclick 大全
java journey
01-25 1020
<br />1. <INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1> 2. <INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2> 3. <INPUT onclick=document.all.WebBrowser.ExecWB(10,1) type=b
js给onclick事件赋值，动态传参数实例解说
01-19
input id=”btn” type=”button” value=”button” onclick=””> </body> Javascript代码 代码如下: [removed] function show(value) { alert(value); } btn.onclick = show(certid.value); ...
jquery应该如何来设置改变按钮input的onclick事件
01-19
jquery应该如何来设置按钮input的onclick事件?比如开始时有个按钮： <input id=”prebt” type=”button” value=”上一页” onclick=”ToPage(2)”/>这行代码是在程序后台生成的，和Discuz!NT论坛源码中的...
JQuery实现表格动态增加行并对新行添加事件
10-25
本示例探讨了如何使用jQuery实现表格动态增加行的功能，并且在新行上添加事件，以提升用户体验和性能。 首先，我们了解目标：创建一个表格，允许用户在表格末尾动态增加空白行，而不是一次性添加大量行，从而避免...
javascript实现的动态添加表单元素input,button等(appendChild)
10-30
通过这种方式，用户点击按钮时，对应的`AddElement`函数会被调用，根据传入的`type`值动态创建相应的`input`元素并添加到页面上。 总结起来，JavaScript实现动态添加表单元素的关键步骤包括： 1. 使用`document....
js动态添加元素时绑定onclick函数
weixin_40938312的博客
05-10 1261
var tieziid=0; $("#hf").append("<div class='hfpin6' onclick='shanchuxinxi("+tieziid+")'>"+"</div>" ); function shanchuxinxi(i){ alert(i); }
touch事件中的touches、targetTouches和changedTouches详解
weixin_38170829的博客
10-27 704
touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性： 1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。 2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手...
html js 设置onclick,js动态添加的DIV中的onclick事件简单实例
weixin_29887801的博客
06-23 2324
js动态添加的DIV中的onclick事件简单实例2019-01-05编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了js动态添加的DIV中的onclick事件简单实例，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。最简单的是这样：动态添加onclick事件：如果使用匿名函数 function(){}，则如下面所示：上面的方法其实原理都一样，都是定义...
利用javascript onclick实现网页跳转
小山羊的学习日志
10-04 2874
学习笔记，仅供参考 转载自：利用javascript onclick跳转链接网页 <input type=button value="跳转" onclick="window.location='你要转向的页面'"> <input type="button" value="跳转" onclick="window.location.href='你要转向的页面'"> <input type="button" value="跳转" onclick="javascript:
input按钮onclick大全
murong
11-18 844
<br /># <INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1>      <br /> # <INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2>      <br /> # <INPUT onclick=document.all.WebBrowser.ExecWB
Javascript中button按钮的onclick()事件传递参数
热门推荐
php菜鸟技术天地
06-17 4万+
function aaa(){  var u_id = '你的id值';  location.href = modifyUser.php？user=u_id } 方法二
修改input的onclick属性
Hxhs2000的博客
06-14 1095
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
onclick控制inputy value的数量
qq_42177117的博客
07-01 78
<input type="button" class="jian" οnclick="del()" value="-" /> <input type="text" class="text" name="quantity" value="{{ minimum }}" id="input-quantity" /> <!-- 产品数量--> <input type="button" class="jia" οnclick="add()" value="+"
WEB基础之拼接标签的onclick传参问题
街角有人祝福,巷口有人哭~
06-29 5017
.一般使用onclick传参 2.使用append或者innerHTML进行拼接语句的时候,绑定onclick事件并且传参,单个参数 ''+v.cartypename+'' 3.使用append或者innerHTML进行拼接语句的时候,绑定onclick时间并且传参,多个参数 document.getElementById("div1").innerHTML +=  "";
djangoz中按钮触发函数传递参数到前端的input
05-30
如果要在 Django 中动态生成参数，则可以在视图函数中将参数传递给模板，并使用 Django 模板语言将参数设置为 JavaScript 变量： ```python def my_view(request): my_param = "Hello, World!" return render...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值