Javascript assigning value to variable

Question

I am trying to make a cell in a table tell me its number when I click it.

for(var j = 0; j < 8; j++){
    var cell = row.insertCell(j);
    cell.name = j;
    cell.onclick=function(){alert(cell.name)};
}

This however, prints the number 8 for every cell. How do I save the value of j in cell.name, instead of just having it point to the variable j?

Thanks.

But going off your code, your cell reference appears to be constant? — Lloyd
– Lloyd, Commented Sep 2, 2013 at 11:14
Change cell so it points to different cells in each iteration. — user1233508
– user1233508, Commented Sep 2, 2013 at 11:15
I have added the "var cell = row.insertCell(j);" Think that is what you ment? — stefan
– stefan, Commented Sep 2, 2013 at 11:29

BenMorel · Accepted Answer · 2013-12-15 00:04:41Z

5

IMPORTANT: All JavaScript developers should know this. It will cause all kinds of weird bugs that is very hard to find.

It is a common mistake of people who are new to JavaScript. I've made the same mistake before.

A function inside a loop is NOT created for every iteration. It is the same one function object with the same closure scope. Thus, your cells will have the exact same onclick callback.

My advice here is NEVER EVER create a function inside of loop. Instead, create and call a function that returns a callback function and assign it to onclick.

for (var j = 0; j < 8; j++) {
    var cell = row.insertCell(j);
    cell.name = j;
    cell.onclick = createOnClick(cell);
}

function createOnClick(cell) {
    return function () {
        // do whatever you want to do with cell
    };
}

edited Dec 15, 2013 at 0:04

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Sep 2, 2013 at 11:23

Joon

9,9448 gold badges51 silver badges75 bronze badges

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

3 Comments

stefan Over a year ago

Something like this? function a(name) { function b(name){ alert(name); } return b(); }

Joon Over a year ago

I will give you an example in few minutes once I turn on my laptop.

stefan Over a year ago

This worked. I placed the "alert(cell.name)" inside the returned function and it now work as intended. Thanks alot :)

Collectives™ on Stack Overflow

Javascript assigning value to variable

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related