Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
    <head>
<meta name="description" content="Closures in loop">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <title>Closure in looping</title>
        <style>
            button{
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <script>
            "use strict"
document.body.onload =  createButtons;
function createButtons() {
    var greetings = [
        {lang:'English', msg:'Good Morning !!'},
        {lang:'German', msg:'Guten Morgen !!'},
        {lang:'French', msg:'Bonjour !!'},
        {lang:'Finnish', msg:'Huomenta !!'}
    ];
    document.createElement('h1');
    console.log(greetings);
    for(var i=0;i<greetings.length; i++){
        let greet = greetings[i];
        var input = document.createElement("button");
        input.appendChild(document.createTextNode(greet.lang));
        input.setAttribute('class','btn btn-default btn-lg');
        input.onclick = function(event){
            alert(greet.msg);
        };
//        input.onclick = (function(msg){return function(event){
//            alert(msg);
//        }})(greet.msg);
        document.body.appendChild(input);
    }
}
        </script>
    </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
yogeshdevatrajpro
0viewers