动态按钮onclick功能不起作用？ [英] Dynamic button onclick function not working ?
本文介绍了动态按钮onclick功能不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用java脚本动态创建一个表。当我输入值并单击复制按钮时，它会动态生成表格。然后我尝试在textbox1中插入值并通过单击get按钮获取txtbox2中的值。但是获取按钮onclick功能不起作用？
以下是我的代码。< b>
我尝试过：
i am creating a table dynamically using java script.when i enter value and click copy button it dynamically generate tables. then i try to insert values in textbox1 and get the value in txtbox2 by clicking get button.but get button onclick function is not working ?
below is my code.
What I have tried:
<pre><!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:100%;
height:99px;
}
.mytable td{
border:1px solid #000000;
height:50px;
}
</style>
<script type="text/javascript">
var s = 1;
function Createtbl() {
var count = document.getElementById("txtbox").value;
var table = document.createElement('table');
table.className = "mytable";
for (var i = 1; i <= count; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.setAttribute('colSpan', '5');
var text1 = document.createTextNode('Header');
td1.appendChild(text1);
tr.appendChild(td1);
table.appendChild(tr);
var tr1 = document.createElement('tr');
var td11 = document.createElement('td');
var td22 = document.createElement('td');
td22.setAttribute('colSpan', '3');
var td33 = document.createElement('td');
var text11 = document.createTextNode('Name');
var text22 = document.createTextNode('Age');
var text33 = document.createTextNode('Sex');
td11.appendChild(text11);
td22.appendChild(text22);
td33.appendChild(text33);
tr1.appendChild(td11);
tr1.appendChild(td22);
tr1.appendChild(td33);
table.appendChild(tr1);
var tr2 = document.createElement('tr');
var td111 = document.createElement('td');
td111.setAttribute('rowSpan', '3');
var td222 = document.createElement('td');
var td333 = document.createElement('td');
var td444 = document.createElement('td');
var td555 = document.createElement('td');
td555.setAttribute('rowSpan', '3');
var text111 = document.createElement("input");
text111.id = "txtbox1" + s;
text111.className = "tbox1";
var text222 = document.createTextNode('');
var text333 = document.createTextNode('');
var text444 = document.createTextNode('');
var text555 = document.createTextNode('');
td111.appendChild(text111);
td222.appendChild(text222);
td333.appendChild(text333);
td444.appendChild(text444);
td555.appendChild(text555);
tr2.appendChild(td111);
tr2.appendChild(td222);
tr2.appendChild(td333);
tr2.appendChild(td444);
tr2.appendChild(td555);
table.appendChild(tr2);
var tr3 = document.createElement('tr');
var td1111 = document.createElement('td');
var td2222 = document.createElement('td');
var td3333 = document.createElement('td');
var text1111 = document.createTextNode('');
var text2222 = document.createTextNode('');
var text3333 = document.createTextNode('');
td1111.appendChild(text1111);
td2222.appendChild(text2222);
td3333.appendChild(text3333);
tr3.appendChild(td1111);
tr3.appendChild(td2222);
tr3.appendChild(td3333);
table.appendChild(tr3);
var tr4 = document.createElement('tr');
var td115 = document.createElement('td');
var td225 = document.createElement('td');
var td335 = document.createElement('td');
var text115 = document.createTextNode('');
var text225 = document.createTextNode('');
var text335 = document.createTextNode('');
td115.appendChild(text115);
td225.appendChild(text225);
td335.appendChild(text335);
tr4.appendChild(td115);
tr4.appendChild(td225);
tr4.appendChild(td335);
table.appendChild(tr4);
var tr5 = document.createElement('tr');
var td116 = document.createElement('td');
var td226 = document.createElement('td');
td226.setAttribute('colSpan', '4');
var text116 = document.createTextNode('');
var text226 = document.createTextNode('');
td116.appendChild(text116);
td226.appendChild(text226);
tr5.appendChild(td116);
tr5.appendChild(td226);
table.appendChild(tr5);
var tr6 = document.createElement('tr');
var td117 = document.createElement('td');
td117.setAttribute('colSpan', '5');
var text117 = document.createTextNode('Footer');
td117.appendChild(text117);
tr6.appendChild(td117);
table.appendChild(tr6);
var tr7 = document.createElement('tr');
var td118 = document.createElement('td');
td118.setAttribute('colSpan', '5');
var span = document.createElement('span');
span.innerHTML = '<button id="btn" onclick="getdata()">GET</button>';
//var text118 = document.createElement("button");
//text118.id="btn";
//text118.innerHTML = "Get Data";
//btn.onclick =getdata;
td118.appendChild(span);
tr7.appendChild(td118);
table.appendChild(tr7);
var tr8 = document.createElement('tr');
var td119 = document.createElement('td');
td119.setAttribute('colSpan', '5');
var text119 = document.createElement("input");
text119.id = "txtbox2" + s;
text119.className = "tbox2";
td119.appendChild(text119);
tr8.appendChild(td119);
table.appendChild(tr8);
s++;
}
document.body.appendChild(table);
}
Createtbl();
//document.getElementById("btn").addEventListener("click", getdata);
function getdata() {
for (j = 1; j <= count; j++) {
var c = document.getElementById("txtbox1" + s).innerHtml;
document.getElementById("txtbox2" + s).innerHtml = c.innerHtml;
}
};
</script>
</head>
<body>
<div>
<input id="txtbox" type="text"/>
<input id="Button1" type="button" value="COPY" onclick="Createtbl()"/>
</div>
</form>
</body>
</html>
推荐答案
编写文档时，会更改名为DOM（文档对象模型）的内容。如果您通过javascript向文档添加内容，则DOM的某些部分不会更新。没有的是文档/脚本引用。就文件而言，项目：'< button id =btnonclick =getdata（）> GET< / button>'只是没有javascript的元素。
您可以通过在javascript中添加事件来创建自己的javascript参考：
When a document is written it changes something called the DOM (Document Object Model). If you add things to the document via javascript then parts of the DOM don't get updated. One thing that doesn't is document / script references. As far as the document is concerned, the item:'<button id="btn" onclick="getdata()">GET</button>'is just an element without javascript.
You can create your own javascript references by adding the event within javascript:
document.getElementById("btn").addEventListener("click", function(e) {
getdata()
});
删除调用函数的行（btw：查找自我调用函数）
在顶部添加以下行：
Remove the line where the function is called (btw: look up self calling function)
add this line at the top:
document.addEventListener('DOMContentLoaded', Createtbl, false);
我发现的第一个问题是文件在函数运行时尚未完成加载所以 document.getElementById（txtbox）为空。
这篇关于动态按钮onclick功能不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
