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

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: stackoverflow.com/questions/52080/… — Kijewski
– Kijewski, Commented Nov 9, 2012 at 19:22
Maybe you should look into using jQuery and similar libraries. It really makes event handling a lot easier. — Kijewski
– Kijewski, Commented Nov 9, 2012 at 19:56

Community · Accepted Answer · 2017-05-23 12:18:42Z

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, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 9, 2012 at 19:24

Kijewski

26.1k14 gold badges108 silver badges149 bronze badges

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

7 Comments

Akyhne Over a year ago

Problem is to do this: el.ondblclick= function() { toggleClass('svg_container_'+i) - i will be 6 and not value of i in the loop.

apsillers Over a year ago

@Akyhne: Kay's second code sample should work perfectly for you; just replace somefunction(i) with toggleClass('svg_container_'+i).

Kijewski Over a year ago

Updated to your example (but @apsillers was faster than me :-) )

Akyhne Over a year ago

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 Over a year ago

Sorry, I didn't know I had to. I thought clicking the "This was usefull" would do it.

|

Akyhne · Accepted Answer · 2012-11-09 20:03:08Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Linked

Related