Recréer après avoir supprimer input avec removeChild

**nou366** · 18/02/2011, 23h58

Bonsoir à tous,

ça fait qq heures que je galére vraiment avec removechild.
je créer des input dynamiquement en fonction d'un select - fonction onchange - , ces input ont des attributs différents. pour cela pas de problèmes. ça marche pour le premier onchange, mais ensuite il ne tient plus compte des nouveaux attributs.
j'ai fait une condition pour ecraser la valeur du select precedent..

, enfin je sais pas si c'est la bonne méthode. mon script :

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
var c=form5.Cours.options[form5.Cours.selectedIndex].id;
if(typeof(texte)!='undefined' ){
		texte= document.getElementById('c1');
		texte.parentNode.removeChild(texte);}
 
 
if(typeof(cible)!='undefined' ){
		cible= document.getElementById('c2');
		cible.parentNode.removeChild(cible);}
 
texte=document.createTextNode(c);
cible=document.createElement("INPUT");
cible.setAttribute("title","text");
cible.setAttribute("size","1");
cible.setAttribute("value",c);
 
document.getElementById('c1').parentNode.appendChild(cible);
document.getElementById('c2').parentNode.appendChild(texte);

merci à tous ceux qui pourront m'aider

**andry.aime** · 19/02/2011, 07h01

Bonjour,
Tes options ont d'id?

if(typeof(texte)!='undefined'

tu as déclaré où texte?
Ce sont quoi les éléments avec les id c1 et c2?
Montre nous ton code HTML.

Code :

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

1
2
cible=document.createElement("input");
cible.setAttribute("type","text");

A+.

**nou366** · 19/02/2011, 07h50

Bonjour,

merci d'essayer de me répondre, voici mon code html. je travaille sur un exemple.
"texte" et "cible" sont crées dynamiquement et je voudrais qu'à chaque chgt du select, il recrée texte et cible en fonctions de ce qu'il se trouve dans les options du select;

Code html :

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

1
2
3
4
5
6
7
8
9
<form name="form5">
<select name='Cours'  onChange="listo()">";
<option id="1">manger</option>
<option id="2">boire</option>
<option id="3">dormir</option>
</select>
</form>
 
<table><td id="c1"></td><tr><td id="c2"></td></table>

**NoSmoking** · 19/02/2011, 09h00

peut être intéressant de voir ce POST

Nota :

Dernière modification par vermine ; Aujourd'hui à 01h40. Motif: Ajout de la balise [code] (bouton #) de l'éditeur

**andry.aime** · 19/02/2011, 09h40

Déjà ton code html sur la table est mal structuré. Tu as déclaré où la variable "texte"?

if(typeof(texte)!='undefined' ){
texte= document.getElementById('c1');

texte.parentNode.removeChild(texte);}

**andry.aime** · 19/02/2011, 09h41

Déjà ton code html sur la table est mal structuré. Tu as déclaré où la variable "texte"?

if(typeof(texte)!='undefined' ){
texte= document.getElementById('c1');
// ICI tu supprimes l'element c1
texte.parentNode.removeChild(texte);}
.......
//donc ici tu faits reference a un element qui n'existe plus
document.getElementById('c1').parentNode.appendChild(cible);

A+.

**nou366** · 19/02/2011, 10h02

la variable "texte" est crée dynamiquement en fonction du select avec createTextNode.
je sais vraiment plus

c'est quoi la bonne méthode pour créer un input avec du texte et qui change en fonction du select.

pour moi, je crée une première fois le input lorsque le select s'execute, et lorsque le select change, je détruit le input et texte créer précedemment ensuite je recrée des nouveaux en fonction du select

**Eric2a** · 19/02/2011, 14h16

Salut,

Essaie ceci...

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">//<![CDATA[
	function removeAll(id){
		var elt=document.getElementById(id);
		if(elt){
			while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
		}
	}
 
	function listo(){
		// Suppression des éléments présents
		removeAll('c1'); // Input
		removeAll('c2'); // Texte
 
		// Option Sélectionnée
		var v=document.getElementById('Cours').value;
 
		//  Texte de l'option sélectionnée
		var t=document.getElementById('o'+v).text;
 
		// Ajoute le texte
		var texte=document.createTextNode(t);
		document.getElementById('c2').appendChild(texte);
 
		// Ajoute la balise input
		var cible=document.createElement('input');
		cible.setAttribute('type','text');
		cible.setAttribute('size','1');
		cible.setAttribute('value',t);
		document.getElementById('c1').appendChild(cible);
 
		return false;
	}
//]]>
</script>
</head>
<body>
<form name="form5">
	<p>
		<select id="Cours" name="Cours" onchange="listo();">
			<option id="o1" value="1">manger</option>
			<option id="o2" value="2">boire</option>
			<option id="o3" value="3">dormir</option>
		</select>
	</p>
	<table>
		<tr><td id="c1"></td></tr>
		<tr><td id="c2"></td></tr>
	</table>
</form>
</body>
</html>

**NoSmoking** · 19/02/2011, 15h07

Envoyé par nou366

c'est quoi la bonne méthode pour créer un input avec du texte et qui change en fonction du select.

pour moi, je crée une première fois le input lorsque le select s'execute, et lorsque le select change, je détruit le input et texte créer précedemment ensuite je recrée des nouveaux en fonction du select

peut être pas obligé de ce servir de la gomme à DOM
- pourquoi ne pas créer la première fois puis remplacer les valeurs les fois suivantes.
- pourquoi ne pas avoir une structure en display:none, que l'on passe en display:inline la première fois et ensuite idem ci dessus.

**nou366** · 19/02/2011, 16h06

Nickel Eric2a

ça marche. un tout grand merci à vous tous

Recréer après avoir supprimer input avec removeChild

JavaScript

Discussions similaires

Partager

Partager