How to trigger all of elements' onclick created in loop?

Question

This is my code:

   var board = document.getElementById("left");
    for (var m = 0; m < 5; m++) {
        var cell = document.createElement('div');
        cell.className = "Cell";
        cell.style.cssText='background-color:#999999;margin:5px;width:50px;height:100px;';
        cell.onclick= function() {
                    cell.innerHTML = "Hello World";
            };
        cell.name = m;
        board.appendChild(cell);
    }

    <div id="left"></div>

However, when I click every div, "Hello World" always show on the last div. How can fix it?

score 4 · Answer 1 · answered Nov 23 '16 at 09:10

As value of cell is being assigned in the loop, it will hold the value of last element

Simple solution:

Use this in handler function! In Event-handler function, this refers to element on which event is invoked!

var board = document.getElementById("left");
for (var m = 0; m < 5; m++) {
  var cell = document.createElement('div');
  cell.className = "Cell";
  cell.style.cssText = 'background-color:#999999;margin:5px;width:50px;height:100px;';
  cell.onclick = function() {
    this.innerHTML = "Hello World";
  };
  cell.name = m;
  board.appendChild(cell);
}

<div id="left"></div>

Or: Use closure, returned-function remembers the environment in which it is created!

var board = document.getElementById("left");
for (var m = 0; m < 5; m++) {
  var cell = document.createElement('div');
  cell.className = "Cell";
  cell.style.cssText = 'background-color:#999999;margin:5px;width:50px;height:100px;';
  cell.onclick = (function(cell) {
    return function() {
      cell.innerHTML = "Hello World";
    }
  })(cell);
  cell.name = m;
  board.appendChild(cell);
}

<div id="left"></div>

The first solution gets the work done, second solution triggers curiosity :) — sabithpocker, Nov 23 '16 at 09:18
@sabithpocker — Search for it... Understand it... It is [_cool_ thing...](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Rayon, Nov 23 '16 at 09:19
Thank you, however, i tried put some functions into cell.onclick = function() { }; but fail.. — 張麥可, Nov 23 '16 at 13:25
@Rayon I do understand that. Just appreciating your answering :) — sabithpocker, Nov 23 '16 at 15:31

How to trigger all of elements' onclick created in loop?

1 Answers1