closure use

by Christopher Stephens

HTML

<div class='buttons'></div>

JavaScript

var createButtons = function (n) {
    for (var x = 0; x < n; x++) {
        var button = $('<button>' + x + '</button>');
        var onButtonClick = (function(){
            var buttonNumber = x;
            return function(){alert(buttonNumber);};
        })();
        button.click(onButtonClick)
        $(".buttons").append(button)
    }
}
var createBadButtons = function (n) {
    for (var x = 0; x < n; x++) {
        var button = $('<button>' + x + '</button>');
        button.click(function(){
            var stuff
            alert(x);
        });
        $(".buttons").append(button)
    }
}
$(".buttons").append('<h1>Good</h1>');
createButtons(3);
$(".buttons").append('<h1>Bad</h1>');
createBadButtons(3);