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?

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?

• javascript
• html
• dynamic
• html-table
• onclick

• td.setAttribute('onclick',"youfunction()"); – Voonic Commented Oct 19, 2013 at 20:06
• 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 Commented Oct 19, 2013 at 20:19

5 Answers 5

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.)

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,

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');}");

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.

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

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