Discussion :

[ymoreau]

Bonjour à tous,
Je cherche à ajouter, modifier ou supprimer des éléments HTML (tous de même type) dans une page. Pour repérer ces différentes balises j'ai eu l'idée de les "numéroter" en concaténant leur id avec une variable incrémentée. Au niveau de la création ça fonctionne :

(nbQ est une variable globale)

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
// Paragraphe de la question
var para = document.createElement("p"); 
para.id = nbQ;
para.className = "pQuestion";
document.getElementById('formAjout').appendChild(para);
 
// Label du champ de titre
var label = document.createElement("label"); 
label.className = "titreQuestion";
label.id = "titre" + nbQ;
label.innerHTML = "Question " + nbQ + " ";
document.getElementById(nbQ).appendChild(label); 
 
// Champ de titre
var saisieTitre = document.createElement("input");
saisieTitre.className = "saisieTitre";
saisieTitre.name = "questions[" + nbQ + "]"; 
saisieTitre.type  = "text";
document.getElementById('titre'+nbQ).appendChild(saisieTitre);

Mes paragraphes s'ajoutent, l'appendChild s'effectue bien sur l'élément voulu, donc "document.getElementById('titre'+nbQ)" par exp retrouve le bon élément.

1) Par contre je souhaite avoir un lien supprimant le paragraphe, j'ajoute donc le lien, et une fonction avec un argument :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Ajout du bouton de suppression
var suppr = document.createElement("a");
suppr.className = "supprPara";
suppr.href = "./creersondage.php";
suppr.innerHTML = "suppr";
suppr.onclick = function() {supprimerQuestion(this.nbQ); return false;};
document.getElementById(nbQ).appendChild(suppr);
 
function supprimerQuestion(nQ)
{
	var elt = document.getElementById(nQ);
	var parent = document.getElementById('formAjout');
	parent.removeChild(elt);
}

J'ai une erreur de pointeur invalide lorsque je clique sur ce lien.

2) Je souhaite pouvoir ajouter des éléments (input) dans les éléments que j'ai créé auparavant avec un lien. Déjà avant ça j'ajoute dans le paragraphe ceci :

(nbR[] est aussi une variable globale)

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
function ajoutReponse(nQ)
{
	nbR[nQ]++;
 
	// Réponse nbR[nP]
	var elt = document.createElement("li");
	elt.id = "li" + nQ + "_" + nbR[nQ];
	document.getElementById("listeReponses"+nQ).appendChild(elt);
 
	var reponse = document.createElement("input");
	reponse.name = "reponses[" + nbQ + "][" + nbR[nQ] + "]";
	reponse.type = "text";
	reponse.className = "saisieReponse";
	document.getElementById("li"+nQ+"_"+nbR[nQ]).appendChild(reponse);
}
 
// Liste des réponses
var liste = document.createElement("ul"); 
liste.id = "listeReponses" + nbQ;
liste.innerHTML = "R&eacute;ponses :<br />";
document.getElementById(nbQ).appendChild(liste);
 
nbR[nbQ] = 0;
 
ajoutReponse(nbQ);
 
// Lien d'ajout de réponse
var ajout = document.createElement("a");
ajout.className = "lienScript";
ajout.href = "./creersondage.php" + nbQ;
ajout.innerHTML = "ajouter une r&eacute;ponse";
ajout.onclick = function() {ajoutReponse(this.nbQ); return false;};
document.getElementById(nbQ).appendChild(ajout);

Lorsque j'essaye de cliquer sur le lien ajoutant une réponse j'ai une erreur :

Erreur : document.getElementById("listeReponses" + nQ) has no properties

Sur cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("listeReponses"+nQ).appendChild(elt);

Alors que la fonction ajoutant une réponse fonctionne dans le code qui crée la liste, elle ne fonctionne plus quand elle est appelée par le lien.

Désolé pour le pavé, mais je n'ai aucune idée d'où ça peut venir, le code visible sur la page php est correct au niveau des id et des indices des balises. Par contre je ne vois pas les attributs "onclick" dans le code HTML.

Merci d'avance !

[ymoreau]

Bon j'ai fini par trouver tout seul finalement, en fait le code (et surtout la variable) que je passais dans la propriété du onclick n'était pas écrite en dur dans la balise HTML mais appelé seulement au moment du clic sur le lien. Comme la variable est globale et changeait entre temps, le paramètre donné dans la fonction n'était plus bon. Il faut renseigner la valeur dans la propriété indice de la balise qui elle restera propre à la balise et appeler la fonction avec cette propriété.

http://javascript.developpez.com/faq...DOM#DOMajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// Lien d'ajout de réponse
var ajout = document.createElement("a");
ajout.className = "lienScript";
ajout.href = "./creersondage.php#basQ" + nbQ;
ajout.innerHTML = "ajouter une réponse";
ajout.indice = nbQ;
ajout.onclick = function() {ajoutReponse(this.indice); return false;};
document.getElementById(nbQ).appendChild(ajout);