How to add ondblclick on an image with Javascript in a loop?

Question

Possible Duplicate:
Event handlers inside a Javascript loop - need a closure?

for i = 1 to 5
{
 var el = document.createElement('img');
 el.ondblclick = somefunction();
 mydiv.appendChild(el);
}

Seems el.ondblclick = somefunction('test'); doesn't do any insertion.

I know I can do..

el.ondblclick= function() { somefunction('test') };

.. but that doesn't work in a loop!

Your loop has some strange Pascal syntax. See the JS syntax here: http://stackoverflow.com/questions/52080/how-do-i-build-a-loop-in-javascript — Kijewski, Nov 09 '12 at 19:22
Maybe you should look into using jQuery and similar libraries. It really makes event handling a lot easier. — Kijewski, Nov 09 '12 at 19:56

score 3 · Accepted Answer · edited May 23 '17 at 12:18

3

Your syntax is wrong.

for (var i = 1; i <= 5; i++) // initialization, condition, loop step
{
    var el = document.createElement('img');
    // you do not want to call `somefunction`, but refer to it:
    el.ondblclick = somefunction;
    mydiv.appendChild(el);
}

If your problem is, that you want to use i inside the callback function:

for (var i = 1; i <= 5; i++)
{
    var el = document.createElement('img');
    el.ondblclick = (function(i) { // bind i
        return function() { // return closure
            toggleClass('svg_container_' + i);
        };
    })(i);
    mydiv.appendChild(el);
}

C.f.

edited May 23 '17 at 12:18

Community

1
1

answered Nov 09 '12 at 19:24

Kijewski

25,517
12
101
143

Problem is to do this: el.ondblclick= function() { toggleClass('svg_container_'+i) - i will be 6 and not value of i in the loop. – Akyhne Nov 09 '12 at 19:37
@Akyhne: Kay's second code sample should work perfectly for you; just replace `somefunction(i)` with `toggleClass('svg_container_'+i)`. – apsillers Nov 09 '12 at 19:44
Updated to your example (but @apsillers was faster than me :-) ) – Kijewski Nov 09 '12 at 19:45
It does actually, after some fiddling with the code! Isn't there a more easy way though? Seems like a lot of code for so little. – Akyhne Nov 09 '12 at 19:57
jQuery: `$('img').on('click', function() { $(this).toggleClass('someclass'); }).appendTo(mydiv)`. And you'd have even less to write using RightJS. – Kijewski Nov 09 '12 at 19:58
Well, it shouldn't be more complicated than this: el.ondblclick = somefunction(); – Akyhne Nov 09 '12 at 20:04
1

Sorry, I didn't know I had to. I thought clicking the "This was usefull" would do it. – Akyhne Nov 09 '12 at 23:00

score 0 · Answer 2 · answered Nov 09 '12 at 20:03

Here's the final code. I personally hate when people don't post a working example

        var sCurMonthId = sMonthId.substr(4, 2);
        var cellRight = oCurRow.insertCell(-1);
        cellRight.colSpan = iNumCells;
        for (svg = 1; svg < iNumCells; svg++)
        {
            var div = document.createElement('div');
            div.className = 'svg_container';
            div.id = 'svg_container_'+svg+'_'+sMonthId;
            cellRight.appendChild(div);
            var el = document.createElement('img');
            el.style.width = svg == 5 ? '99.5%' : '49%';
            el.className = 'svg_chart';
            el.style.cssFloat = svg%2 == 0 ? 'right' : 'left';
            el.ondblclick = (function(svg) {
                return function() {
                    toggleClass('svg_container_'+svg+'_'+sMonthId, 'svg_container', 'svg_expanded');
            };
    })(svg);
            el.src = 'mySite.tld';
            div.appendChild(el);
        }

How to add ondblclick on an image with Javascript in a loop?

2 Answers2