bonjour,

je débute en javascript,
j'aimerais crée un organigramme dynamiquement avec enregistrement dans une BDD (pour le moment, je suis au début), je sais qu'il existe des applications pour cela, mais ça me permettra de mieux saisir les notions du javascript si c'est moi même qui le fait.

J'aimerais savoir comment interagir sur des éléments que j'ai crée dynamiquement en javascript.

voila mon code pour mieux comprendre :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
 
<html>
<head></head>
<body>
 
<?php require_once 'connect.inc.php'; ?>
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript">
<!--
function affiche()
{
	alert('hello');
	var node = document.getElementById("formR");
var parent = node.parentNode;
parent.removeChild(node);
 
}
 
function sup_form()
{
	var node = document.getElementById("formR");
		if(node!=undefined)
		{
			var parent = node.parentNode;
			parent.removeChild(node);
		}
}
	/*fonction permettant de détecter un clic droit*/
	function droite(e)
	{
		if ((!document.all && e.which == 3) || (document.all && event.button==2))
		{
			createForm();
		}
		return true;
	}
 
	/*fonction permettant de faire du drag'n drop*/
 	function drag() 
	{
		$(".draggable").draggable();
	}
 
	/*fonction permettant de créer un cadre ou div
	avec du texte passé en parametre*/
	function create(arg,arg2)
	{
		sup_form();
		var cadre=document.createElement('div');
		document.body.appendChild(cadre);
		cadre.setAttribute("class","draggable");
		//cadre.setAttribute("style","background-color:red;");
 
		var serv=document.createElement('p');
		var text_serv=document.createTextNode(arg);
		serv.appendChild(text_serv);
 
		var resp=document.createElement('p');
		var text_resp=document.createTextNode(arg2);
		resp.appendChild(text_resp);
 
		cadre.appendChild(serv);
		cadre.appendChild(text_resp);
		drag();
 
		if(document.all) cadre.attachEvent("ondblclick",createForm);
		else cadre.addEventListener("dblclick",createForm,true);
 
	}
 
	$(function() 
	{
		$(".draggable").draggable();
	}
	);	
 
 
function createForm()
{
	var form=document.createElement("form");
	document.body.appendChild(form);
	form.setAttribute("style","background:#60B7EC;width:150px;");
	form.setAttribute("id","formR");
	form.setAttribute("action","test.php");
 
	var input=document.createElement("input");
	input.setAttribute("type","text");
	input.setAttribute("name","service");
	var nom = document.createTextNode("Nom du service");
    var label = document.createElement("label");
    label.appendChild(nom);
    label.appendChild(input);
	form.appendChild(label);
 
	var input2=document.createElement("input");
	input2.setAttribute("type","text");
	input2.setAttribute("name","responsable");
	var nom2 = document.createTextNode("Nom du responsable");
    var label2 = document.createElement("label");
    label2.appendChild(nom2);
	label2.appendChild(input2);
	form.appendChild(label2);
 
	var color=document.createElement("input");
	color.setAttribute("type","text");
	color.setAttribute("name","color");
	color.setAttribute("size","5");
	var nom3 = document.createTextNode("Couleur du cadre");
	var label3=document.createElement("label");
    label3.appendChild(nom3);
	label3.appendChild(color);
	form.appendChild(label3);
 
	var img=document.createElement("img");
	img.setAttribute("src","img/add.png");
	img.setAttribute("title","ajouter");
	form.appendChild(img);
	if(document.all) img.attachEvent("onclick",function(){create(document.forms["formR"].service.value,document.forms["formR"].responsable.value);});
	else img.addEventListener("click",function(){create(document.forms["formR"].service.value,document.forms["formR"].responsable.value);},true);
 
	var img2=document.createElement("img");
	img2.setAttribute("src","img/delete.png");
	img2.setAttribute("title","supprimer");
	form.appendChild(img2);
 
	var img3=document.createElement("img");
	img3.setAttribute("src","img/edit.png");
	img3.setAttribute("title","editer");
	if(document.all) img3.attachEvent("onclick",affiche);
	else img3.addEventListener("click",affiche,true);
	form.appendChild(img3);
 
 
 
	/*var lien=document.createElement("a");
	lien.setAttribute("href","#");
	if(document.all) lien.attachEvent("onclick",function(){document.forms.test.submit();});
	else lien.addEventListener("click",function(){document.forms.test.submit();},true);
	var image=document.createElement("img");
	image.setAttribute("src","img/delete.png");
	lien.appendChild(image);
	form.appendChild(lien);*/
 
	var node = document.getElementById("start");
	if(node!=undefined)
	{
		var parent = node.parentNode;
		parent.removeChild(node);
	}
}
 
//-->
</script>
 
<input type="button" value="Start" id="start" onclick="createForm()" />
 
<?php 
/*if($_POST['responsable']!=NULL)
        echo 'moi';*/
?>
 
</body>
</html>
J'aimerais pouvoir compter le nombre de div (avec la class draggable) déjà crée, pour pouvoir donner un nom à la div du genre cadre1, cadre2, etc...
Je souhaiterais également pouvoir modifier la couleur de fond d'une div mais pour cela, il faut connaitre son id et dans l'état actuel ce n'est pas possible

PS 1: veuillez m'excuser si ce sujet a déjà été traité, j'ai cherché sur le forum sans succès

PS 2 : je pense qu'il faut utiliser document.getElementsByTagName('div').length mais je ne suis pas sur que sa fonctionne avec les éléments crées en js

Merci d'avance