Recréer après avoir supprimer input avec removeChild

Version imprimable

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:

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

19/02/2011, 07h01
andry.aime
Bonjour,
Tes options ont d'id?

Citation:

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:

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

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:

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>

19/02/2011, 09h00
NoSmoking

peut être intéressant de voir ce POST

Nota :

Citation:

Dernière modification par vermine ; Aujourd'hui à 01h40. Motif: Ajout de la balise [code] (bouton #) de l'éditeur
19/02/2011, 09h40
andry.aime

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

Citation:

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

texte.parentNode.removeChild(texte);}
19/02/2011, 09h41
andry.aime

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

Citation:

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+.
19/02/2011, 10h02
nou366

la variable "texte" est crée dynamiquement en fonction du select avec createTextNode.
je sais vraiment plus :cry:
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:roll:

Salut,

Essaie ceci...

Code:

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>

19/02/2011, 15h07
NoSmoking

Citation:

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.
19/02/2011, 16h06
nou366

Nickel Eric2a

ça marche. un tout grand merci à vous tous:ccool::ccool::ccool: