js动态生成的button添加onclick事件 代码如下 想要实现的效果是勾选食物后生成 米饭+1- 点击加号值加1
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js动态生成的button添加onclick事件 代码如下 想要实现的效果是勾选食物后生成 米饭+1- 点击加号值加1相关的知识，希望对你有一定的参考价值。
<script type="text/javascript">
//selectthis(obj,i);
function selectthis(obj,i)
alert(i);
var bs=document.getElementsByTagName("input");
if(obj.checked==true)
alert(1);
// var content=document.getElementById("content");
//alert(text);
var btnjian=document.createElement("input");//生成减号；
//alert(btnjian);
btnjian.type="button";
btnjian.value="-";
var btnjia=document.createElement("input");//生成加号
btnjia.type="button";
btnjia.value="+";
var foodname=document.createElement("input");//生成选中的食物名
foodname.type="text";
foodname.value=i;
content.appendChild(foodname);
content.appendChild(btnjia);
content.appendChild(btnjian);
var bs = document.getElementsByTagName("input");
alert(bs);
for(var i=0;i<bs.length;i++)
var b=bs[i];
alert(bs[1]);
b.setAttribute("aaa",i);
b.onclick=function()
//var s=confirm("我是"+this.getAttribute("aaa")+"号，是否值加一");
var x=0;
var a=document.createElement("input");
a.type="text";
a.value=++x;
alert(x);
//document.getElementById("content").innerhtml+="</br><input name =\"1\"type=\"text\" onclick=\"click()\" value=\"按钮\"><\input>";
//selectthis();
</script>
</head>
<body>
<div id="select">
种类：<br/>
<input type="checkbox" value="馒头" onClick="selectthis(this,this.value)" name="items">馒头<br/>
<input type="checkbox" value="油饼" onClick="selectthis(this,this.value)" name="items">油饼<br/>
<input type="checkbox" value="油条" onClick="selectthis(this,this.value)" name="items">油条<br/>
</div>
已选：
<div id="content">
</div>
</body>
</html>
function selectthis(obj)
var content=document.getElementById("content");
if(obj.checked)
var btnjian=document.createElement("input");
btnjian.type="button";
btnjian.value="-";
btnjian.setAttribute("fid",obj.id);
btnjian.onclick=function()
var fdiv=document.getElementById("f"+this.getAttribute("fid"));
var fnum=fdiv.getElementsByTagName("input")[0];
if(fnum.value>1)fnum.value-=1;
var btnjia=document.createElement("input");
btnjia.type="button";
btnjia.value="+";
btnjia.setAttribute("fid",obj.id);
btnjia.onclick=function()
var fdiv=document.getElementById("f"+this.getAttribute("fid"));
var fnum=fdiv.getElementsByTagName("input")[0];
fnum.value=parseInt(fnum.value)+1;
var num=document.createElement("input");
num.type="text";
num.value=1;
var foodname=document.createTextNode(obj.value);
var box=document.createElement("div");
box.id="f"+obj.id;
box.appendChild(foodname);
box.appendChild(num);
box.appendChild(btnjia);
box.appendChild(btnjian);
content.appendChild(box);
else
var box=document.getElementById("f"+obj.id);
content.removeChild(box);
</script>
<div id="select">
种类：<br/>
<input id="f1" type="checkbox" value="馒头" onClick="selectthis(this)" name="items">馒头<br/>
<input id="f2" type="checkbox" value="油饼" onClick="selectthis(this)" name="items">油饼<br/>
<input id="f3" type="checkbox" value="油条" onClick="selectthis(this)" name="items">油条<br/>
</div>
已选：
<div id="content"></div> 参考技术A function selectthis(obj,i)
var id="";
switch(i)
case '馒头':id="MT";break;
case '油饼':id="YB";break;
case '油条':id="YT";break;
if(obj.checked==true)
var content=document.getElementById("content");
var divElement=document.createElement("div");
divElement.id="List_"+id;
var btnjian=document.createElement("input");//生成减号；
btnjian.type="button";
btnjian.value="-";
btnjian.id="jian_"+id;
btnjian.onclick=function()
var id= this.id.split('_')[1];
var number=document.getElementById(id).value;
if(number>1)
document.getElementById(id).value=number-1;
else
alert("最少选一件");
var btnjia=document.createElement("input");//生成加号
btnjia.type="button";
btnjia.value="+";
btnjia.id="jia_"+id;
btnjia.onclick=function()
var id= this.id.split('_')[1];
var number=parseInt(document.getElementById(id).value);
document.getElementById(id).value=number+1;
var foodname=document.createElement("span");//生成选中的食物名
foodname.innerHTML=i;
var foodnumber=document.createElement("input");//生成选中的食物数量
foodnumber.type="text";
foodnumber.value=1;
foodnumber.id=id;
divElement.appendChild(foodname);
divElement.appendChild(btnjia);
divElement.appendChild(foodnumber);
divElement.appendChild(btnjian);
content.appendChild(divElement);
else
var e=document.getElementById("List_"+id);
e.parentNode.removeChild(e);
js 动态添加的按钮 onclick事件怎么写？
参考技术A如图，比方说我有一个函数，而我们需要点击按钮触发指定的函数，这就用到了绑定事件的方法。
如图，假定是点击事件，则在按钮里面添加onclick=函数名即可把函数绑定到按钮上。onclick绑定的是单击事件哦，当然还有很多其他的事件。
如图，绑定事件之后，当我们点击按钮即可触发绑定的函数，非常神奇哦。
当然，也可以给按钮设定一个ID，然后我们获取到带有ID的按钮。
然后在JavaScript中绑定事件也是可以的，这种方法代码比较多，想用哪种看你自己哦。
需要特别注意一点的是，如果用了第二种方法，当要获取id时，如果script脚本写在head里面，则要加上window.onload哦。如果是写在body后面，则不需要写window.onload。
以上是关于js动态生成的button添加onclick事件 代码如下 想要实现的效果是勾选食物后生成 米饭+1- 点击加号值加1的主要内容，如果未能解决你的问题，请参考以下文章