Discussion :

[Invité]

Bonjour,

Alors, je me suis mis en tête de réaliser un paragraphe qui, lorsque l'on clique dessus, devient une zone de saisie de texte avec un bouton pour confirmer la modification du paragraphe, ceci avec le DOM et replaceChild. Seulement, j'y ai passé trois heures, dont deux à chercher ce qui n'allait pas, et je n'ai aucune idée de ce que j'ai mal fait ! Voilà donc le code :

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
var parent= document.createElement('p');
var edit=document.createTextNode('Paragraphe éditable');
 
parent.appendChild(edit);
ul.appendChild(parent);
parent.addEventListener('click', edite);
 
 
function edite(event)
	{
 
		var txt = event.target.innerHTML;
		var textarea=document.createElement("textarea");
		textarea.value=txt;
		parent.replaceChild(textarea,edit) ;
		var b = document.createElement('button');
		b.innerHTML = 'Valider';
		ul.appendChild(b);
		b.addEventListener('click', confirme);
 
	}
 
function confirme(event)
{
 
	var bout=event.target;
	alert("caco");
	var edite=document.createTextNode('Paragraphe éditable');
	alert("ok");
	parent.replaceChild(edite,textarea);
	alert("caca");
	var nvtxt=textarea.innerHTML;
	alert(nvtxt);
 
	edit.innerHTML=nvtxt;
 
}

J'ai mis ce code dans le document HTMl avec la balise script. Ce qui se passe : j'ai ma page qui s'affiche, je peux cliquer sur le paragraphe, et j'ai alors le formulaire qui s'affiche correctement. Mais quand je clique sur le bouton de validation du formulaire, je ne retrouve pas le paragraphe !
A noter que je n'ai pas encore essayé de conserver le texte saisi dans le formulaire pour le transférer dans le paragraphe, je suis vraiment sur ce problème du second replaceChild. Et j'ai trouvé une solution à cet énoncé, mais elle n' utilise pas replaceChild, ce qui m'a l'air plutôt compliqué !
A noter également qu' il y a des restes de mes nombreuses tentatives de débogage, d' où les variables inutilisées notamment.
J'aimerais donc que vous m'expliquiez ce qui ne va pas ici, et, si possible, que vous me le corrigiez

Merci d'avance !
Ookajiro

[lysandro]

Bonjour,

Tu déclares ta variable textarea dans ta fonction edite. Tu l'utilises aussi, mais sans la déclarer, ni la définir, dans ton autre fonction confirme. Lors du replaceChild(edite,textarea) dans confirme, textarea est donc non définie : undefined, le replaceChild(edite,textarea) échoue avec une erreur visible dans la console.

Tu as le choix, par exemple, entre :
- Soit déclarer ta variable textarea au même niveau que tes fonctions :

Code :

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

1
2
3
4
5
6
7
var textarea;
function edite ( ... ) {
   ...
}
function confirme ( ... ) {
   ...
}

- Soit définir confirme à l'intérieur de edite :

Code :

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

1
2
3
4
5
6
function edite ( ... ) {
   ...
  function confirme ( ... ) {
     ...
  }
}

Dans les deux cas, textarea sera accessible dans confirme.

NB: Il y a d'autres possibilités et ce n'est pas le seul problème de ton code et il n'y a pas de formulaire (formulaire == balise <form>).

edit: voir ci-dessous les explications plus détaillées de Ryan

[ryan]

Yop!

Il y a une série de problèmes dans ton code.

- La variable ul n'est pas déclarée, donc impossible de faire un appendChild dedans. Tu peux faire l'appendChild sur le body du document, mais tu pourrais le faire ailleurs, pour autant que la cible de l'appendChild soit bien référencée.

- En déclarant explicitement la variable "textarea" dans ta fonction edite(), tu limites sa portée à l'intérieur de cette fonction, et cette variable ne peut donc pas être connue de ton autre fonction confirme().
La solution est soit de ne pas déclarer explicitement la variable "textarea" dans la fonction edite(), donc supprimer le "var" devant le nom de la variable dans la fonction edite(), soit de déclarer explicitement cette variable en dehors des fonctions, comme tu l'as fait pour les variables "parent" et "edit".
Un peu de lecture sur la portée des variables en javascript ne peut pas nuire.

-Ta gestion des événements est un peu brouillonne. Une fois qu'on a cliqué sur le parent, il faut lui enlever l'écouteur d'événement (sinon on va ajouter un bouton à chaque fois qu'on va cliquer sur le parent, même si son contenu est devenu un textarea) et lui remettre éventuellement dans la fonction confirme() pour pouvoir commencer un nouveau cycle d'édition.
Dans la fonction confirme(), il faut effacer le bouton d'édition pour revenir à l'état du début; c'est-à-dire: le parent éditable qui attend un clic pour afficher un bouton.

- Enfin, pour modifier le texte dans ton textnode, tu dois utiliser la propriété nodeValue plutôt que la propriété innerHTML.

Ce qui donne:

Code html :

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
<!DOCTYPE HTML>
<html>
<head>
<title>EDIT</title>
</head>
<body>
 
<script>
var parent = document.createElement('p');
var edit = document.createTextNode('Paragraphe éditable');
 
// donne une portée globale à la variable "textarea"
var textarea;
 
parent.appendChild(edit);
 
// ajoute l'objet l'élément parent au body de la page
document.body.appendChild(parent);
 
parent.addEventListener('click', edite);
 
function edite(event)
{
 
        // enlève l'écouteur d'événement de l'élément "parent"
        parent.removeEventListener('click', edite);
                
        var txt = event.target.innerHTML;
        textarea = document.createElement("textarea");
        textarea.value = txt;
        parent.replaceChild(textarea,edit) ;
                
        var b = document.createElement('button');
        b.innerHTML = 'Valider';
        
        // ajoute le bouton dans le body de la page
        document.body.appendChild(b);
        b.addEventListener('click', confirme);
 
}
 
function confirme(event)
{
 
        var bout = event.target;
        
        // efface le bouton
        document.body.removeChild(bout);
        
        // remet l'écouteur d'événement sur l'élément "parent"
        parent.addEventListener('click', edite);
        
        var nvtxt = textarea.value;
        parent.replaceChild(edit,textarea);
        
        // met à jour la valeur du noeud texte
        edit.nodeValue= nvtxt;
}
 
</script>
</body>
</html>

Edit: grillé par Lysandro

[Invité]

Bonjsoir,

merci pour vos réponses détaillées, j'espère ne pas vous avoir trop piqué les yeux avec mon code dégueu
Pour ul, je vous ai envoyé une partie du code où ça n'était pas initialisé, parce que c'est un élément que j'utilisais dans un autre exercice et que j'avais dans le même script. Et j'ai encore énormément de mal à interpréter ce que me dit la console, je trouve ça très peu explicite, je mets des heures à déboguer des trucs bêtes alors qu' en c# tu sais tout de suite ce qui ne va pas. Merci encore en tout cas, et bonne joursoirée