Question

I realise a similar issue has been asked here Javascript – Dynamically assign onclick event in the loop but I think I was a bit confused and couldn’t add a comment.

I’m making a series of divs dynamically, in an array “newdiv”.
I want to create an onClick function which will expand the offsetHeight to the scrollHeight.

I’m trying to do this in my for loop as such:

newdiv[i].onclick = function() {expandThis(message_id) };

Where

message_id = message_array[i][0];

(the id column in the array, at message ‘i’)

The problem is familiar – all the made onClicks refer to the last message_id.
Is there an easy way to make the onClick for newdiv[i] refer to message_array[i][0]?

Answer 1

You need to break the closure with message_id:

newdiv[i].onclick = (function(id) {
                       return function() {expandThis(id) };
                    }(message_id));

There are a million questions like this one, e.g. Do while javascript Problem.