Setting function parameter dynamically

Question

Hello I do have following code sample in which Im trying to give each element different onClick functionality :

for (var i = 0; i < sizex; i++) {
        for (var j = 0; j < sizey; j++) {
            var canvas = document.createElement("CANVAS");
            var id = i * 10 + j;
            canvas.id = "canvas" + id;
            canvas.width = 25;
            canvas.height = 25;
            canvas.style = "border:1px solid black";
            canvas.onclick = function() {
               canvasClicked(id);
            };

            document.body.appendChild(canvas);
        }
    }

problem is its always called with id = sizex * 10 + sizey

who can I pass parameter of canvasCliced to function so this function is "different" for each canvas?

Closures my friend, learn them, love them!

tymeJV
– tymeJV

2014-04-03 20:11:57 +00:00
Commented Apr 3, 2014 at 20:11 — tymeJV
– tymeJV, Commented Apr 3, 2014 at 20:11

Sushanth -- · Accepted Answer · 2014-04-03 20:14:31Z

2

Use a closure.

Change your click handler from

canvas.onclick = function() {
     canvasClicked(id);
};

to form a closure, where in the scope of the variable would be accessible.

canvas.onclick = function(nId) {
    return function() {
       canvasClicked(nId);
    }
}(id);

answered Apr 3, 2014 at 20:14

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

Collectives™ on Stack Overflow

Setting function parameter dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related