87,995
社区成员
发帖
与我相关
我的任务
分享创建input对象时遇到的问题，各位大神帮帮忙解答
写一个动态生成复选框的函数，窗口加载完触发生成第一个复选框，勾选之会调用某个函数，但是创建完以后勾选之毫无动静，函数并没有被调用，onclick并没有加到dom里去，试着改成button也没有反应，这是什么原因呢，希望能有大神解惑。
var e=document.createElement("input");
e.type="checkbox";
e.id="jump"+num;
e.onclick=function(){boxcheck(this.id)};
document.getElementById("two_block"+num).appendChild(e);
var e=document.createElement("input");
e.type="checkbox";
e.id="jump"+num;
e.onclick=function(){boxcheck(this.id)};
document.getElementById("two_block"+num).appendChild(e);
...全文
请发表友善的回复…
发表回复
丨黑暗星云丨 2016-02-29
- 打赏
- 举报
说的很清楚，十分感谢
还有就是1L发的那个，那是中间还有个复选框，但其实性质是一样的，后面也使用了innerHTML
不管怎么样，还是感谢
还有就是1L发的那个，那是中间还有个复选框，但其实性质是一样的，后面也使用了innerHTML
不管怎么样，还是感谢
functionsub 2016-02-29
- 打赏
- 举报
上面最后一行appendChild前面少一个.
functionsub 2016-02-29
- 打赏
- 举报
document.getElementById("three_block"+num).innerHTML+=mm;
这个地方有问题
这样会把前面加进去的带有click事件的input给转成html，再进行字符串拼接。
拼接后的input已经不是原来那个带有click事件的元素了
你在1L给出的代码不是这样的。。问题就出在appendChild后又innerHTML了。
如果你要在input后面增加字符串，要么createElement一个span，调用span的innerHTML来加字符，要么就直接createTextNode('其他')
像下面这样：
var m=document.createElement("input");
m.type="checkbox";
m.id="prompt"+num;
m.style.display="inline-block";
m.onclick=function(){boxcheck(this.id)};
document.getElementById("three_block"+num).appendChild(m);
var mm=document.createTextNode("其他 ");
document.getElementById("three_block"+num).appendChild(mm); var m=document.createElement("input");
m.type="checkbox";
m.id="prompt"+num;
m.style.display="inline-block";
m.onclick=function(){boxcheck(this.id)};
document.getElementById("three_block"+num).appendChild(m);
var mm=document.createElement('span');
mm.innerHTML = "其他 ";
document.getElementById("three_block"+num)appendChild(mm);丨黑暗星云丨 2016-02-29
- 打赏
- 举报
因为真的很长
<body>
<script>
var num=1;
window.onload=addfirst
function boxcheck(id)
{
var a=document.getElementById(id);
if(a.checked==true)
{
var b=id.replace(/[^0-9]/ig,"");
if(id=="jump"+b)
{document.getElementById("in_two_block"+b).style.display="inline-block"}
else if(id=="prompt"+b)
{document.getElementById("three_block"+b).style.display="inline-block"}
else return;
}
else
{
var b=id.replace(/[^0-9]/ig,"");
if(id=="jump"+b)
{document.getElementById("in-two_block"+b).style.display="none"}
else if(id=="prompt"+b)
{document.getElementById("ps"+b).style.display="none"}
else return;
}
}
function addfirst()
{
var first_father=document.createElement("div");
first_father.id="son"+num;
first_father.class="son";
document.getElementById("father").appendChild(first_father);
var a=document.createElement("div");
a.id="one_block"+num;
a.style.display="block";
document.getElementById("son"+num).appendChild(a);
var b=document.createElement("input");
b.type="text";
b.id="number"+num;
b.style.width="40px";
b.name="number";
b.placeholder="序号";
document.getElementById("one_block"+num).appendChild(b);
var c=document.createElement("input");
c.type="text";
c.id="question"+num;
c.style.width="240px";
c.name="question";
c.placeholder="问题";
document.getElementById("one_block"+num).appendChild(c);
var d=document.createElement("input");
d.type="button";
d.id="+button"+num;
d.name="name1";
d.value="+";
document.getElementById("one_block"+num).appendChild(d);
var f=document.createElement("div");
f.id="two_block"+num;
f.style.display="block";
document.getElementById("son"+num).appendChild(f);
var e=document.createElement("input");
e.type="checkbox";
e.id="jump"+num;
e.onclick=function(){boxcheck(this.id)};
document.getElementById("two_block"+num).appendChild(e);
var ee="隐藏 ";
document.getElementById("two_block"+num).innerHTML+=ee;
var p=document.createElement("div");
p.id="in_two_block"+num;
p.style.display="inline-block";
document.getElementById("two_block"+num).appendChild(p);
var g=document.createElement("span");
g.innerHTML="年:";
document.getElementById("in_two_block"+num).appendChild(g);
var h=document.createElement("input");
h.type="text";
h.id="chapter"+num;
h.style.width="25px";
name="chapter";
document.getElementById("in_two_block"+num).appendChild(h);
var i=document.createElement("span");
i.innerHTML="月:";
document.getElementById("in_two_block"+num).appendChild(i);
var j=document.createElement("input");
j.type="text";
j.id="scene"+num;
j.style.width="25px";
name="scene";
document.getElementById("in_two_block"+num).appendChild(j);
var k=document.createElement("span");
k.innerHTML="日:";
document.getElementById("in_two_block"+num).appendChild(k);
var l=document.createElement("input");
l.type="text";
l.id="event"+num;
l.style.width="25px";
name="event";
document.getElementById("in_two_block"+num).appendChild(l);
var n=document.createElement("div");
n.id="three_block"+num;
n.style.display="block";
document.getElementById("son"+num).appendChild(n);
var m=document.createElement("input");
m.type="checkbox";
m.id="prompt"+num;
m.style.display="inline-block";
m.onclick=function(){boxcheck(this.id)};
document.getElementById("three_block"+num).appendChild(m);
var mm="其他 ";
document.getElementById("three_block"+num).innerHTML+=mm;
var o=document.createElement("input");
o.type="text";
o.id="ps"+num;
o.name="ps";
document.getElementById("three_block"+num).appendChild(o);
}
</script>
<div id="father">
</div>
</body>
<body>
<script>
var num=1;
window.onload=addfirst
function boxcheck(id)
{
var a=document.getElementById(id);
if(a.checked==true)
{
var b=id.replace(/[^0-9]/ig,"");
if(id=="jump"+b)
{document.getElementById("in_two_block"+b).style.display="inline-block"}
else if(id=="prompt"+b)
{document.getElementById("three_block"+b).style.display="inline-block"}
else return;
}
else
{
var b=id.replace(/[^0-9]/ig,"");
if(id=="jump"+b)
{document.getElementById("in-two_block"+b).style.display="none"}
else if(id=="prompt"+b)
{document.getElementById("ps"+b).style.display="none"}
else return;
}
}
function addfirst()
{
var first_father=document.createElement("div");
first_father.id="son"+num;
first_father.class="son";
document.getElementById("father").appendChild(first_father);
var a=document.createElement("div");
a.id="one_block"+num;
a.style.display="block";
document.getElementById("son"+num).appendChild(a);
var b=document.createElement("input");
b.type="text";
b.id="number"+num;
b.style.width="40px";
b.name="number";
b.placeholder="序号";
document.getElementById("one_block"+num).appendChild(b);
var c=document.createElement("input");
c.type="text";
c.id="question"+num;
c.style.width="240px";
c.name="question";
c.placeholder="问题";
document.getElementById("one_block"+num).appendChild(c);
var d=document.createElement("input");
d.type="button";
d.id="+button"+num;
d.name="name1";
d.value="+";
document.getElementById("one_block"+num).appendChild(d);
var f=document.createElement("div");
f.id="two_block"+num;
f.style.display="block";
document.getElementById("son"+num).appendChild(f);
var e=document.createElement("input");
e.type="checkbox";
e.id="jump"+num;
e.onclick=function(){boxcheck(this.id)};
document.getElementById("two_block"+num).appendChild(e);
var ee="隐藏 ";
document.getElementById("two_block"+num).innerHTML+=ee;
var p=document.createElement("div");
p.id="in_two_block"+num;
p.style.display="inline-block";
document.getElementById("two_block"+num).appendChild(p);
var g=document.createElement("span");
g.innerHTML="年:";
document.getElementById("in_two_block"+num).appendChild(g);
var h=document.createElement("input");
h.type="text";
h.id="chapter"+num;
h.style.width="25px";
name="chapter";
document.getElementById("in_two_block"+num).appendChild(h);
var i=document.createElement("span");
i.innerHTML="月:";
document.getElementById("in_two_block"+num).appendChild(i);
var j=document.createElement("input");
j.type="text";
j.id="scene"+num;
j.style.width="25px";
name="scene";
document.getElementById("in_two_block"+num).appendChild(j);
var k=document.createElement("span");
k.innerHTML="日:";
document.getElementById("in_two_block"+num).appendChild(k);
var l=document.createElement("input");
l.type="text";
l.id="event"+num;
l.style.width="25px";
name="event";
document.getElementById("in_two_block"+num).appendChild(l);
var n=document.createElement("div");
n.id="three_block"+num;
n.style.display="block";
document.getElementById("son"+num).appendChild(n);
var m=document.createElement("input");
m.type="checkbox";
m.id="prompt"+num;
m.style.display="inline-block";
m.onclick=function(){boxcheck(this.id)};
document.getElementById("three_block"+num).appendChild(m);
var mm="其他 ";
document.getElementById("three_block"+num).innerHTML+=mm;
var o=document.createElement("input");
o.type="text";
o.id="ps"+num;
o.name="ps";
document.getElementById("three_block"+num).appendChild(o);
}
</script>
<div id="father">
</div>
</body>functionsub 2016-02-29
- 打赏
- 举报
我在一开始是利用window.onload创建一个子元素在id为"father"的div里，然后再继续添加文本框和复选框等等，然后又把其中某几个再装进div里，然后又发现这里面还要再分，这样就成了一层套一层……下图
然后就出现了刚才的问题，onclick无法添加到dom里，然后我就试着将id为jump1的input放到father里（就是第一层的div）
我接着又试着干脆不创这么多div，直接全写进son1里，结果放在一块始终不行……
希望能告知我这种情况的原因[/quote]
贴代码吧。。
然后就出现了刚才的问题，onclick无法添加到dom里，然后我就试着将id为jump1的input放到father里（就是第一层的div）
我接着又试着干脆不创这么多div，直接全写进son1里，结果放在一块始终不行……
希望能告知我这种情况的原因[/quote]
贴代码吧。。丨黑暗星云丨 2016-02-26
- 打赏
- 举报
我在一开始是利用window.onload创建一个子元素在id为"father"的div里，然后再继续添加文本框和复选框等等，然后又把其中某几个再装进div里，然后又发现这里面还要再分，这样就成了一层套一层……下图
然后就出现了刚才的问题，onclick无法添加到dom里，然后我就试着将id为jump1的input放到father里（就是第一层的div）
我接着又试着干脆不创这么多div，直接全写进son1里，结果放在一块始终不行……
希望能告知我这种情况的原因
丨黑暗星云丨 2016-02-26
- 打赏
- 举报
控制台是一直完全不反应的，所以我才很蛋疼啊，不贴出全部代码是因为是一直重复创建对象再添加，创建了很多但是并没有做其他的，请你等一等我做个说明出来，免得你直接看代码会很繁的。
functionsub 2016-02-26
- 打赏
- 举报
看看控制台有没有报错吧。
这代码确实没什么问题。
实在不行你把跟这块有关的代码完整的贴出来吧啊。
丨黑暗星云丨 2016-02-26
- 打赏
- 举报
boxcheck()是在全局作用域里的，按理说应该能调用
我修改了一下，把创建的对象添加到了第一个div里，就是这里
本来是创建在这个div的子元素的子元素里
结果就能调用了，请问这是什么原理呢
functionsub 2016-02-26
- 打赏
- 举报
这几行代码没问题。
检查下 boxCheck 这个函数是否跟这几行代码在同一作用域或全局作用域里。
