08/09/2011 Development / java script

var animals = ["aligator", "bat", "cow"];
var bad = document.getElementById("bad");
for (var i = 0; i < animals.length; i++) {
  var animal = animals[i];
  var input = document.createElement("input");
  input.type = "button";
  input.value = animal;
  input.style.marginLeft = "5px";
  input.onclick = function() {alert(animal);};
  bad.appendChild(input);
}

Oque vai acontecer com esse código??? Ao clicar em qualquer um dos botões, vai aparecer um alert com a palavra "cow", porque a variavel animal no final estará setada como "cow", Simples né.

Como reverter isso?

var animals = ["aligator", "bat", "cow"];
var good = document.getElementById("good");
for (var i = 0; i < animals.length; i++) {
  var animal = animals[i];
  var input = document.createElement("input");
  input.type = "button";
  input.value = animal;
  input.style.marginLeft = "5px";
  input.onclick = (function(animal) {return function() {alert(animal);};})(animal);
  good.appendChild(input);
}

Agora fizemos uma clousure! No momento da atribuição do valor da variavel, estamos setando uma função que assim que chamada, vai nos retornar o valor da variavel no momento em que ela foi setada.