DIV Dinamicas

HQuintas · Maio 29, 2010

Viva

Estou criando várias DIVs dinamicamente, mas quando clicar numa gostaria de obter a sua ID individual de cada uma. Como posso fazer isso?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>javas</title>
    <style type="text/css">

    .dynamicDiv {
    width:200px;
    height:100px;
    position:absolute;
    background-color:silver;
    display:block;

      
    }

    </style>

<script type="text/javascript" language="javascript">
var i=0;
var w=0;
function varias(fil){
var k="150";
//alert("oi");
for (y=1;y<=3;y++){
for (x=1;x<=6;x++){
 w++;
        var divTag = document.createElement("div","id=" + w);
       
        //divTag.id = "div" + w;
        //divTag.name="div" + w;
      

        //document.getElementById("div1").style.backgroundImage = "url(images/green.gif)";
       divTag.style.backgroundImage = "url(" + w + ".jpg)";
        
       divTag.style.width="110px";
       divTag.style.top=k*y + "px";
       divTag.style.margin = "0px "+ k*x +"px";
   
       divTag.style.cursor = "hand";
       
       divTag.className ="dynamicDiv";
   
       divTag.onclick=function(){alert(document.activeElement.id)};
       divTag.innerHTML = document.activeElement.id;
        
       document.body.appendChild(divTag);


} //x


} //y

</script>

</head>
<body onload="varias('aviso.jpg');">

Romerito · Maio 29, 2010

i aew HQuintas, bom troca essa linha:

var divTag = document.createElement("div","id=" + w);

por essa:

var divTag = document.createElement("div");

e logo abaixo dela coloque essa linha:

divTag.setAttribute( "id" , "id" + w );

bom espero que ajude abraço!

HQuintas · Maio 29, 2010

Tudo bem,

mas nesta linha dá-me sempre a id da ultima div:

divTag.onclick=function(){alert(divTag.id)};

e eu quero de cada uma em individual.

Obrigado

Romerito · Maio 30, 2010

bom carinha aqui ele retorna sempre a id da DIV clicada, vai ai o seu codigo com as alterações que eu já havia citado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>javas</title>
    <style type="text/css">

    .dynamicDiv {
    width:200px;
    height:100px;
    position:absolute;
    background-color:silver;
    display:block;


    }

    </style>

<script type="text/javascript" language="javascript">
		var i=0;
		var w=0;
		function varias( fil )
		{
			var k="150";
			for (y=1;y<=3;y++)
			{
				for (x=1;x<=6;x++)
				{
					w++;
					var divTag = document.createElement("div");/* var divTag = document.createElement("div","id=" + w);*/
				       divTag.setAttribute( "id" , "id" + w ) ;/*linha adicionada*/
				       divTag.style.backgroundImage = "url(" + w + ".jpg)";

				       divTag.style.width="110px";
				       divTag.style.top=k*y + "px";
				       divTag.style.margin = "0px "+ k*x +"px";

				       divTag.style.cursor = "hand";

				       divTag.className ="dynamicDiv";

				       divTag.onclick= function(){ alert( this.id /*document.activeElement.id*/) } ;
				       divTag.innerHTML = divTag.getAttribute("id");/*document.activeElement.id*/

				       document.body.appendChild(divTag);
				}
			}
		}
</script>

</head>
<body onload="varias('aviso.jpg');">
</body>
</html>

espero que ajude abraço!

Editado Maio 30, 2010 por Romerito

HQuintas · Junho 1, 2010

E ajudou bastante. Obrigado

(faltava-me o this.id)

Editado Junho 1, 2010 por HQuintas

Entrar

DIV Dinamicas

Pergunta

HQuintas

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Romerito

Link para o comentário

Compartilhar em outros sites

HQuintas

Link para o comentário

Compartilhar em outros sites

Romerito

Link para o comentário

Compartilhar em outros sites

HQuintas

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades