[Resolvido] Variável em um evento

[M4n0w4r 0]

Olá galera :)

 

Olhem esse código:

<script>
	/*
		Cria elementos com respectivos eventos
	*/
	
	window.onload = function () {
		var container, i;
		
		for (i = 0; i < 10; i ++) {
			// Cria elemento
			container = document.createElement ("div");
				// Valor atual da variável "i"
				container.innerHTML = i;
				
				// Estilos
				container.style.border = "1px solid black";
				container.style.padding = "10px";
			
			// Cria evento
			container.onclick = function () {
				// Alerta o valor da variável i
				alert (i);
			}
			
			// Insere o elemento no documento
			document.body.appendChild (container);
		}
	}
</script>

Tudo que eu quero é que quando eu clicar em um elemento ele me alerte o valor da variável "i" na hora da execução e não depois dela. No começo da execução do script a variável "i" tem valor 0 e no final tem valor 9 e o evento "onclick" sempre é chamado quando o script foi totalmente carregado, ou seja, sempre vai me retornar para todos os elementos o valor 9 que é o valor final da variável. Tem como contornar esse problema ?

 

Vlwwwwwwwwwwwwwwwwwwwwwww, flwwwwwwwwwwwwwwwwwwwwwwwwww http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

[M4n0w4r 0]

Senhores e Senhoras (existem senhoras aqui ? http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif)

 

A solução do meu problema é usar closures. Agora irei compartilhar com vocês :)

 

<script>
	window.onload = function () {
			var container, i;

			for (i = 0; i < 10; i ++) {
					container = document.createElement ("div");
							container.innerHTML = i;

							container.style.border = "1px solid black";
							container.style.padding = "10px";

							container.onclick = (function(i) {
								return function() {
									alert(i);
								};
							})(i);
						
					document.body.appendChild (container);
			}
	}
</script>

Obrigado ao StackOverFlow e ao blog do Javiani, http://javiani.wordpress.com/2009/11/07/closure-em-javascript.