Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

paulojuchem

[Resolvido] Porque o javascript se comporta desta forma?

Por , em Javascript

Recommended Posts

paulojuchem    20

paulojuchem
Postado

Peço de coracao para que, quem puder, criar um arquivo html e testar para ver o que acontece

 


<head>
<script type="text/javascript">
	window.onload = function(){

		var pai = document.getElementById("pai");
		for(var i=1; i<=5;i++){

			var m = i;
			var div = document.createElement('div');

			div.setAttribute('style' , 'width:200px; height:50px; float:left; margin-left:3px; border: 1px solid #000;');
			div.onclick = function(){

				alert("E agora meu valor => " + m);

			}

			div.innerHTML = "Meu valor => "+m;

			pai.appendChild(div);

		}


	}
	</script>
</head>
<body>
<div id='pai'>

</div>
</body>

 

Bom, eu tenho uma ideia de porque isso acontece, mas como resolver?

 

se eu utilizar, por exemplo, div.setAttribute('teste' , m);

e depois, dentro do evento onclick utilizar

 

this.getAttribute('teste');

dai funciona, mas fica horrivel, imagina se voce tem um objeto inteiro e precisa passar por parametro, dai fudeu?

 

OBS: na verdade eu preciso passar um objeto que contem muita coisa, o exemplo acima é apenas para ter uma ideia do que esta acontecendo, ele sempre leva em consideracao o ultimo...

 

OBS2: Eu posso criar alguma coisa para mapear os objetos e passar algum indie para o atributo do elemento html, mas é muita gambiarra.... so que, se for o unico jeito, fazer oq...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

seu problema é escopo.

 

<head>
<script type="text/javascript">
window.onload = function()
{
var pai = document.getElementById("pai");
for(var i=1; i<=5;i++)
{
	(function(){
		var m = i;
		var div = document.createElement('div');

		div.setAttribute('style' , 'width:200px; height:50px; float:left; margin-left:3px; border: 1px solid #000;');
		div.onclick = function()
		{
			alert("E agora meu valor => " + m);
		}

		div.innerHTML = "Meu valor => "+m;
		pai.appendChild(div);
	})();
}
}
</script>
</head>
<body>
<div id='pai'>

</div>
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

paulojuchem    20

paulojuchem
Postado

cara do ceu, te amo, voce mora aonde? preciso te pagar uma cerveja!

 

haha, brincadeiras a parte, mas sera que voce sabe algum lugar que fale algo sobre esse assunto, gostaria de entender o porque disso.

 

Obrigado!

 

Att. paulo

Compartilhar este post

Link para o post
Compartilhar em outros sites

paulojuchem    20

paulojuchem
Postado

achei as respostas para tudo aqui caso alguem tenha duvidas semelhantes

http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

esta muito bem explicado

acho que deu por hoje, vlw willian

 

function addLinks () {

for (var i=0, link; i<5; i++) {

link = document.createElement("a");

link.innerHTML = "Link " + i;

link.onclick = function (num) {

return function () {

alert(num);

};

}(i);

document.body.appendChild(link);

}

}

window.onload = addLinks;

 

por que tem aquele segundo parenteses? no exemplo caima a variavel i esta dentro dele.. so isso que nao esta me descendo, tipo

(function(){
alguma_coisa
})(QUEM_é_ESSE_CARA_AQUI)

 

achei epico o que esta abaixo, nunca tinha pensado nisso

 

for (var onclick = function(num){return function(){alert(num)}}, i=0, link; i<5; i++) {

link = document.createElement("a");

link.innerHTML = "Link " + i;

link.onclick = onclick(i);

document.body.appendChild(link);

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

por que tem aquele segundo parenteses? no exemplo caima a variavel i esta dentro dele.. so isso que nao esta me descendo, tipo

(function(){
alguma_coisa
})(QUEM_é_ESSE_CARA_AQUI)

 

Isso é uma função anônima auto executável.

 

Primeiramente você define uma função anônima:

( function( param ){
} )

 

E logo depois executa a mesma passando os parametros necessários:

(function( param ){
   //...
})( data );

 

Uma aplicação prática é quando você não quer poluir o escopo global, e injetar dependências. Exemplo de uma aplicação que necessita do jQuery:

(function( $ ) {
   var div = $( 'div' );
   console.log( div ); //Irá exibir o objeto jQuery contendo as divs
}( jQuery ));

console.log( div ); //Irá ocorrer um erro, ReferenceError: div is not defined

 

 

Outra aplicação é quando você quer ter membros privados em um Objeto:

 

var App = (function(){
   var pub = {},
       me  = this;

   pub.setFoo = function( foo ) {
       me.foo = foo;
   };

   pub.getFoo = function() {
       return me.foo;
   };

   return pub;
}());

App.setFoo( 'bar' );
console.log( App.getFoo() ); //'bar'
console.log( App.foo ); //undefined

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito