Onclick dynamically added with javascript to td element doesn't work

Question

I have a problem trying to figure out why my dynamically added onclick event doesn't do anything. I have searched many sites already but nothing I tried worked. Knowing myself it is probably some kind of stupid mistake but I really want to know what I did wrong. This is a part of my code including relevant functions:

        function ChangeNumber(line){   //this is just a test function so far :)
            document.getElementById('maincol').innerHTML += line + "<br/>"; //just adds "something to the end of a div"
        }

        function ChangeSize()
        {
            var rows, cols;
            rows = document.getElementById('rows').value;
            cols = document.getElementById('cols').value;

            var tbody = document.getElementById('model');
            tbody.innerHTML = "";

            for (var i = 0; i < rows; i++){
                var tr = document.createElement('tr');
                for (var j = 0; j < cols; j++){
                    var td = document.createElement('td');
                    td.setAttribute('name', (i * cols) + (j + 1));
                    td.onclick = function() {ChangeNumber('something'); };
                    td.innerHTML = "0";
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
            }

        }

The creation of the table works fine and so does call to the function ChangeNumber() from statically created onclick but when I click on the dynamically created td nothing happens. Can someone please clarify the problem to me?

In addition to my answer, here's one more advice. If you rightclick the element in, say, Google Chrome, and say "Inspect element", or simply view the page source, you can check what the generated TD looked like. It would be missing the 'onclick' attribute. — Zlatko
– Zlatko, Commented Oct 19, 2013 at 20:19

struthersneil · Accepted Answer · 2013-10-19 20:30:39Z

1

A quick JSFiddle shows that the basic approach is fine--at least in Chromium.

tbody_x = document.getElementById('x');
tbody_x.innerHTML = '';

for (row = 0; row < 5; row++)
{
  tr = document.createElement('tr');

  for (col = 0; col < 10; col++) 
  {
    td = document.createElement('td');
    td.setAttribute('name', 'r' + row + 'c' + col);
    td.onclick = function() { ChangeNumber('hi'); };
    td.innerHTML = '0';
    tr.appendChild(td);
  }

  tbody_x.appendChild(tr);
}

Something else must be broken. (Try firing up Firebug or similar and look for JS errors in the console.)

answered Oct 19, 2013 at 20:30

struthersneil

2,76013 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr.YellowMan · Accepted Answer · 2016-03-22 08:49:28Z

1

You could also use:

td.onclick = ChangeNumber;

the ChangeNumber is a function that could also be bind to the click, if you place this function inside you could make a custom function for each onclick.

I know what problem he's facing and it just that the onclick function wont poppup, it doesn't show any logs and if you use the td.onclick = ChangeNumber(); then it would just fire this function once when loading this script,

answered Mar 22, 2016 at 8:49

Mr.YellowMan

987 bronze badges

1 Comment

Soma Sarkar Over a year ago

this works. we can pass argument also. here is the sample: td.onclick = ChangeNumber(object);

AAA · Accepted Answer · 2013-10-19 20:09:47Z

0

You have to set up the onclick as an attribute. So, instead of

td.onclick = function() {ChangeNumber('something'); };

you would want something like

td.setAttribute('onclick', "function() {ChangeNumber('something');}");

answered Oct 19, 2013 at 20:09

AAA

1,3841 gold badge10 silver badges15 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:02:02Z

0

When creating a HTML element, you have to use setAttribute to set this. Additionally, you'll have to make this a string.

So, something like:

td.setAttribute('onclick', 'function(){change("Something")}');

Alternatively, you can put it like this:

td.setAttribute('onclick', 'changeSomething();');

Then define your script somewhere on your global object, like this:

changeSomething = function() {
// do the change
}

The third option is to use an event library. Then you'd be able to do something like:

Event.on(td, 'click', changeSomething);

Check out this question to see what I mean.

P.S. It's out of scope of this question, but better not bind stuff on global object. Use a module or something.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Oct 19, 2013 at 20:17

Zlatko

19.7k14 gold badges76 silver badges130 bronze badges

2 Comments

Soma Sarkar Over a year ago

the given solution does not work. it says "changeSomething " is not defined

Zlatko Over a year ago

Did you do the Then define your script somewhere on your global object, like this: step?

Ashok Kumar Gupta · Accepted Answer · 2013-10-19 20:54:01Z

0

Your approach seems to be fine, pls find here: (jsfiddle.net/fa9SV/)

Please just crosscheck that all IDs exist within document. Hope this helps!

answered Oct 19, 2013 at 20:54

Ashok Kumar Gupta

9747 silver badges9 bronze badges

Collectives™ on Stack Overflow

Onclick dynamically added with javascript to td element doesn't work

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related