Dynamic button onclick function not working ?

Question

1.00/5 (1 vote)

See more:

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>

Posted 13-Jul-17 0:20am

Member 13296172

Updated 13-Jul-17 1:09am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Accepted Answer · 2017-07-13T01:09:00

Solution 2

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:

JavaScript

document.getElementById("btn").addEventListener("click", function(e) {
	getdata()
});

Posted 13-Jul-17 1:09am

Andy Lanng

Updated 13-Jul-17 1:12am

v2

Comments

Member 13296172 13-Jul-17 7:15am

i dnt knw where to put this. could u give me a full solution. so that it will be helpfull.

Andy Lanng 13-Jul-17 7:16am

note this line in your code:
span.innerHTML = '<button id="btn" onclick="getdata()">GET</button>';
change it to
span.innerHTML = '<button id="btn">GET</button>';
add the code snippet below

Member 13296172 13-Jul-17 7:25am

here is js fiddle for my code https://jsfiddle.net/x4j6s99d/

Andy Lanng 13-Jul-17 7:51am

Well, I've fixed that up as best as I can: https://jsfiddle.net/x4j6s99d/6/
At the end you're trying to access the innerHtml of a textbox? There is no inner html

Member 13296172 13-Jul-17 7:27am

pls provide me soln

Member 13296172 13-Jul-17 9:19am

thanks bro for the help !!

Andy Lanng · Accepted Answer · 2017-07-13T00:52:00

Solution 1

Remove the line where the function is called (btw: look up self calling function)

add this line at the top:

JavaScript

document.addEventListener('DOMContentLoaded', Createtbl, false);

First issue I found was that the document hasn't finished loading by the time the functions runs so document.getElementById("txtbox") is null.

Posted 13-Jul-17 0:52am

Andy Lanng

Comments

Member 13296172 13-Jul-17 6:55am

can u provide me solution ?

Andy Lanng 13-Jul-17 6:56am

Huh? I just did

Member 13296172 13-Jul-17 7:00am

but value is not getting in textbox 2

Andy Lanng 13-Jul-17 7:04am

ah - i see. Ok - next solution

Member 13296172 13-Jul-17 7:07am

am a beginner so pls help with this.

Andy Lanng 13-Jul-17 7:13am

No problem. I have posted a second solution.

You should look into jQuery. It makes things like dynamic forms (and document manipulation in general) a whole lot easier, and there is more help out there for it nowadays

Dnyati 4-Dec-19 6:02am

I am creating dynamic table which I has 3 columns. First columns has campaign Name 2nd & 3rd column is status of that campaign which is image button. What I expect when I click status button it should return respective campaign name. Below is my code. Nothing is happening when I click on status button.

would be great if you can provide solution.

https://jsfiddle.net/Dnyati/qepuvbjx/3/

Andy Lanng 4-Dec-19 6:04am

Please post new questions as a Question. We are limited in what interactions we can provide in reply posts