Closure IN LOOP

by bhupendra negi

HTML

<div id = "container"></div>

<div id = "container1"></div>

CSS

#container{ 
border:1px blue solid;
        width:100px;
    float:left;
        margin-right:20px
}
a{ 
display:block;
width:auto    
    
 
}

a:hover{
cursor:pointer; 
font-weight:bold ;
color:green;
    
}

JavaScript

// looping function


function addLinks(){
    
    var container = document.getElementById("container")
    
 for(var i = 0,link;i<5;i++)
 {
     link = document.createElement("a");
     //callclick(i,link);
     link.onclick = function() {alert(i);}


     link.innerHTML = "LINK:"+i;
     container.appendChild(link);
 }
   
}

function callclick(i,link)
{
         link.onclick = function () {alert(i)};
 
    
}

addLinks();

// function to understand closure loop issue

function addLinks2()
{
    var con = document.getElementById("container1");
    
    for(var i=0,link;i<5;i+=1)
    {
        link = document.createElement("a");
        link.innerHTML =  " LINK => "+i;
        link.onclick = function(num) { return function() {alert(num);}  }(i);;
        con.appendChild(link);
    }
    
    
}




addLinks2();