JavaScript Closure Example

HTML

<div> div 1 </div>
<div> div 2 </div>
<div> div 3 </div>
<div> div 4 </div>

<p id="message"></p>

<a href="http://forr.st/~YgT">Original Forrst post</a>

CSS

div{
 margin:10px 10px 40px 10px;
 border:5px solid grey;
 padding:10px;
 float:left;
    cursor:pointer;
    
}

div:hover{
 border-color:green;
}

p{
 padding:10px;
 margin:10px;
 border:1px solid green;
 clear:both;

}

a{
 margin-top:80px;
 display:block;   
}

JavaScript

var div = document.getElementsByTagName("div");

function makeClickFuncClosure(x) {
    return function() {
      clickFunc(x);  
    }
}

function clickFunc(x) {
    document.getElementById("message").innerHTML="Hello, this was added in iteration number: " + x;
}

for(var j = 0; j<div.length; j++) {
 div[j].addEventListener('click', makeClickFuncClosure(j), false);

}


ffd