Dynamically creating elements and adding onclick event not working

Question

I have a for loop that creates div-elements with IDs like 'category1', 'category2' etc. The loop goes through a key/value array, which looks something like this:

"0" : "Java",
"1" : "JavaScript",
"2" : "HTML"

So, the IDs of the divs are 'category' + the key.

Within the for-loop where the elements are added to the innerHTML of a container-div, I add an onclick-event.

This is the for-loop that I'm talking about:

for (var key in categories) {
    categoriesBlock.innerHTML += '<div class="category" id="category' + key + '">' + categories[key] + '</div>';

    document.getElementById('category' + key).onclick = function() { showPostsForCategory(key, categories[key]); }
}

where categories is the above array.

The problem is, the onclick is only working for the LAST element in the array. If I check with the Safari-debugger and type "category3.onclick" it says null. If I type "category4.onclick" (which is the last one) it returns the correct function.

How is this possible? And how to solve it?

what does the rendered html in the debug tools look like?

Dragony
– Dragony

2015-02-18 00:17:03 +00:00
Commented Feb 18, 2015 at 0:17 — Dragony
– Dragony, Commented Feb 18, 2015 at 0:17
Just normal divs as you would expect from the code.

Jeroen
– Jeroen

2015-02-18 06:37:20 +00:00
Commented Feb 18, 2015 at 6:37 — Jeroen
– Jeroen, Commented Feb 18, 2015 at 6:37

posit labs · Accepted Answer · 2015-02-18 16:43:10Z

3

This is an issue with scoping. The click handler is pointing to the last value because that's what it ended up as when the loop ended. Here is a way to trap the value.

for (var key in categories) {        
    (function(){
      var _key = key;
      document.getElementById('category' + _key).onclick = function() { showPostsForCategory(_key, categories[_key]); }
    })();
}

Edit...

Also, string concatenation is not the ideal way to create html elements. In some browsers, there might be a delay between when you insert text, and when it becomes an actual html element.

var div = document.createElement('div');
div.onclick = function(){...};
categoriesBlock.appendChild(div);

edited Feb 18, 2015 at 16:43

answered Feb 18, 2015 at 0:30

posit labs

9,5114 gold badges42 silver badges70 bronze badges

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

2 Comments

Jeroen Over a year ago

This isn't working. It gives just the same result: only the last one has an onclick event. Very strange. Do you have any other ideas?

Jeroen Over a year ago

Finally it works! I combined your initial answer (_key and the nested-function) with your edited answer. Now it works. It doesn't make very much sense, especially because I haven't really used JavaScript before. Anyway, thank you!

Collectives™ on Stack Overflow

Dynamically creating elements and adding onclick event not working

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related