[DOM] Erreur suite � l'ajout d'�l�ment HTML

**cuisto44000** · 15/12/2008, 01h28

bonjour, j'ai un code a realiser sur cette page http://discodrive.fr/reservation_nuit_du_bois.php

les gens doivent choisir entre aller-retour aller simple ou retour simple, en cliquant sur l'un d'eux, les option en dessous devraient s'afficher, mais sa s'affiche pas, pourquoi ?

Voici mon code ...

javascript dans le head :

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
 
<script language="javascript">
function ar() {
document.getElementById('aller').innerHTML = '  <input type="radio" name="lieu" value="1" onclick="heure1()" />H&ocirc;tel IBIS - Nantes Centre<br />
												<input type="radio" name="lieu" value="2" onclick="heure2()" />H&ocirc;tel IBIS - Nantes Gare Sud<br />
												<input type="radio" name="lieu" value="3" onclick="heure3()" />H&ocirc;tel FORMULE 1 - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="4" onclick="heure4()" />ETAP H&ocirc;tel - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="5" onclick="heure5()" />H&ocirc;tel CAMPANILE - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="6" onclick="heure6()" />H&ocirc;tel IBIS - Nantes La Beaujoire<br />
												<input type="radio" name="lieu" value="7" onclick="heure7()" />WESTOTEL - La Chapelle sur Erdre<br />';
 
document.getElementById('retour').innerHTML = ' <select name="retour">
												<option value="1h00">1h00</option>
												<option value="2h30">2h30</option>
												<option value="4h00">4h00</option>
												</select>';		
 
}
function a() {
document.getElementById('aller').innerHTML = '<input type="radio" name="lieu" value="1" onclick="heure1()" />H&ocirc;tel IBIS - Nantes Centre<br />
												<input type="radio" name="lieu" value="2" onclick="heure2()" />H&ocirc;tel IBIS - Nantes Gare Sud<br />
												<input type="radio" name="lieu" value="3" onclick="heure3()" />H&ocirc;tel FORMULE 1 - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="4" onclick="heure4()" />ETAP H&ocirc;tel - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="5" onclick="heure5()" />H&ocirc;tel CAMPANILE - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="6" onclick="heure6()" />H&ocirc;tel IBIS - Nantes La Beaujoire<br />
												<input type="radio" name="lieu" value="7" onclick="heure7()" />WESTOTEL - La Chapelle sur Erdre<br />';
}
function r() {
document.getElementById('retour').innerHTML = '<select name="retour">
												<option value="1h00">1h00</option>
												<option value="2h30">2h30</option>
												<option value="4h00">4h00</option>
												</select>';
}
function heure1() {
document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="17h00" /> 17h00 <br /><input type="radio" name="heure_depart" value="19h40" /> 19h40 <br /><input type="radio" name="heure_depart" value="21h45" /> 21h45 <br />';
}
function heure2() {
document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="17h15" /> 17h15 <br /><input type="radio" name="heure_depart" value="19h55" /> 19h55 <br /><input type="radio" name="heure_depart" value="22h00" /> 22h00 <br />';
}
function heure3() {
document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="17h45" /> 17h45 <br /><input type="radio" name="heure_depart" value="20h25" /> 20h25 <br /><input type="radio" name="heure_depart" value="22h20" /> 22h20 <br />';
}
function heure4() {
document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="18h00" /> 18h00 <br /><input type="radio" name="heure_depart" value="20h30" /> 20h30 <br /><input type="radio" name="heure_depart" value="22h35" /> 22h35 <br />';
}
function heure5() {
document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="18h10" /> 18h10 <br /><input type="radio" name="heure_depart" value="20h40" /> 20h40 <br /><input type="radio" name="heure_depart" value="22h45" /> 22h45 <br />';
}
function heure6() {
document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="18h30" /> 18h30 <br /><input type="radio" name="heure_depart" value="20h55" /> 20h55 <br /><input type="radio" name="heure_depart" value="22h55" /> 22h55 <br />';
}
function heure7() {
document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="18h50" /> 18h50 <br /><input type="radio" name="heure_depart" value="21h05" /> 21h05 <br /><input type="radio" name="heure_depart" value="23h05" /> 23h05 <br />';
}
</script>

et le html :

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
<form method="post" action="" name="formulaire">
<table>
<tr><th>Vous prendrez notre car pour *&nbsp;&nbsp;&nbsp;<br /><br /></th><td><input type="radio" name="trajet" value="ar" onclick="ar()" />Aller et retour <input type="radio" name="trajet" value="a" onclick="a()" />All&eacute; simple <input type="radio" name="trajet" value="r" onclick="r()" />Retour simple</td></tr>
<tr><th>D&eacute;part de &nbsp;&nbsp;&nbsp; <br /><br /></th>
	<td id="aller">
		
		<br /><br />
	</td>
</tr>
<tr><th>heure de d&eacute;part &nbsp;&nbsp;&nbsp; <br /><br /></th>
	<td id="heure">
		<br /><br />
	</td>
</tr>
<tr><th>heure de retour &nbsp;&nbsp;&nbsp; <br /><br /></th>
	<td id="retour">
	<br /><br />
	</td>
</tr>
<tr><th>* : <br /><br /></th><td>Champs obligatoires !<br /><br /></td></tr>
</table>
<br />
<div class="scroll">
<?php
$termes=mysql_query("SELECT * FROM nav_termes_ndb WHERE id='1'");
$t=mysql_fetch_assoc($termes);

$sujet=nl2br($t['content']);
$deco=array(""=>"<b>",""=>"</b>",""=>"<u>",""=>"</u>",""=>"<i>",""=>"</i>","[hr]"=>"<hr />",""=>"<s>",""=>"</s>","[img]"=>"<img src='","[/img]"=>"' />");
$sujet=strtr($sujet,$deco);
$sujet=preg_replace('#\[h(.*)\](.*)\[/h(.*)\]#Usi','<h$1>$2</h$3>',$sujet);
$sujet=preg_replace('#\[color=(.*)\](.*)\[/color\]#Usi','<span style="color:$1;">$2</span>',$sujet);
$sujet=preg_replace('#\[img\](.*)\[/img\]#Usi','<img src="$1" />',$sujet);
$sujet=preg_replace('#\[url=(.*)\](.*)\[/url\]#Usi','<a href="$1" style="text-decoration:none;">$2</a>',$sujet);

echo $sujet;
?>

</div>
<br />
<input type="checkbox" name="termes" /> En cochant cette case, j' acc&egrave;pte les termes et conditions mentionn&eacute;es ci-dessus !
<br /><br />
<div align="center"><input type="reset" value="remettre &agrave; z&eacute;ro" /> | <input type="submit" name="enreg" value="envoyer" /></div>
</form>

Quand je cliques sur aller et retour ou aller simple ou retour simple sa m'affiche rien en dessous, pourriez vous m'aider, merci beaucoup par avance

**SpaceFrog** · 15/12/2008, 09h19

Il faut eviter d'ins�rer des objets sur une page en collant simplement leur code HTML ...
Renseigne toi sur le DOM

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.createElement('...')

**RomainVALERI** · 15/12/2008, 10h38

Oui, innerHTML pose beaucoup de probl�mes, notamment sous IE, et notamment avec les �l�ments de formulaire, et tu n'es pas le seul � rencontrer ce genre de soucis...
La bonne solution est celle �voqu�e par SpaceFrog :
- createElement
- setAttribute
- appendChild
- caf� tr�s fort ^^

**SpaceFrog** · 15/12/2008, 11h31

on peut ajouter � la liste:
- un tour dans les contributions :http://www.developpez.net/forums/d53...ynamique-form/

**cuisto44000** · 15/12/2008, 12h07

j'ai essay� de remplacer mes innerHTML = '...'; par des createElement ('...');
Mais sa marche pas non plus

Merci quand meme et d�sol� je n'y connais malheureusement rien en javascript

**RomainVALERI** · 15/12/2008, 12h27

Rassure-moi, tu n'as pas ins�r� ton html directement dans createElement(...), hein ? ^^
Parce que si c'est le cas c'est plut�t mal barr�...
En tout cas dans le doute inspire-toi de l'excellent lien propos� par SpaceFrog.

**cuisto44000** · 15/12/2008, 12h56

arf si pourquoi ? vraiement desol�
Alors comment devrait se presenter mon code ? enfaite j'ai essay� de regarder les codes propos�s dans le lien mais j'y comprends rien

**RomainVALERI** · 15/12/2008, 14h56

Allez je te fais un exemple simple

-----------------------------------
1) exemple pas b� avec innerHTML :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
var elem = document.getElementById('idDeTonElementParent');
var elem.innerHTML = "<span id='spanTest'>Un contenu sublime</span>";

-----------------------------------
2) le m�me r�sultat en utilisant les fonctions appropri�es pour un DOM correct :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
var parent = document.getElementById('idDeTonElementParent');
// création d'un SPAN (vide et non rattaché au document)
var nouveauSpan = document.createElement("SPAN");
// rattachement au conteneur de ton choix
parent.appendChild(nouveauSpan);
// ajout de la propriété "id" à ton SPAN
nouveauSpan.setAttribute("id", "spanTest");
// remplissage, ici par une simple node de texte
nouveauSpan.appendChild(document.createTextNode("Un contenu sublime"));

Bien s�r, c'est plus difficile � lire, plus long � �crire, et beaucoup de personnes vont pr�f�rer gagner ce petit temps et passer par innerHTML qui marche tr�s bien pour de petites choses sans trop de traitements ult�rieurs.

Par contre, c'�tait pour te montrer l'alternative � innerHTML, qui est indispensable pour reconstruire l'arbre DOM de ta page correctement, pour le cas o� tes autres scripts doivent interagir avec le contenu que tu as ajout� dynamiquement.
Je te laisse appliquer cette mani�re de proc�der pour les �l�ments correspondant � ton exemple personnel, mais si en cours de route tu rencontres des soucis pour mettre la m�thode en oeuvre, reviens nous voir ^^

**cuisto44000** · 15/12/2008, 16h58

ok merci beaucoup je vais essayer sa mais sa me parait assez clair

merci encore !

**cuisto44000** · 15/12/2008, 18h28

sa ne marche pas

html :

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
 
<tr><th>Vous prendrez notre car pour *&nbsp;&nbsp;&nbsp;<br /><br /></th><td><input type="radio" name="trajet" value="ar" onclick="ar()" />Aller et retour <input type="radio" name="trajet" value="a" onclick="a()" />All&eacute; simple <input type="radio" name="trajet" value="r" onclick="r()" />Retour simple</td></tr>
<tr><th>D&eacute;part de &nbsp;&nbsp;&nbsp; <br /><br /></th>
	<td id="aller">
 
		<br /><br />
	</td>
</tr>
<tr><th>heure de d&eacute;part &nbsp;&nbsp;&nbsp; <br /><br /></th>
	<td id="heure">
		<br /><br />
	</td>
</tr>
<tr><th>heure de retour &nbsp;&nbsp;&nbsp; <br /><br /></th>
	<td id="retour">
	<br /><br />
	</td>
</tr>
<tr>

javascript :

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
 
<script language="javascript">
function ar() {
var aller = document.getElementById('aller');
// création d'un SPAN (vide et non rattaché au document)
var nouveauSpan = document.createElement("SPAN");
// rattachement au conteneur de ton choix
aller.appendChild(nouveauSpan);
// ajout de la propriété "id" à ton SPAN
nouveauSpan.setAttribute("id", "allé");
// remplissage, ici par une simple node de texte
nouveauSpan.appendChild(document.createTextNode("<input type="radio" name="lieu" value="1" onclick="heure1()" />H&ocirc;tel IBIS - Nantes Centre<br />
												<input type="radio" name="lieu" value="2" onclick="heure2()" />H&ocirc;tel IBIS - Nantes Gare Sud<br />
												<input type="radio" name="lieu" value="3" onclick="heure3()" />H&ocirc;tel FORMULE 1 - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="4" onclick="heure4()" />ETAP H&ocirc;tel - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="5" onclick="heure5()" />H&ocirc;tel CAMPANILE - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="6" onclick="heure6()" />H&ocirc;tel IBIS - Nantes La Beaujoire<br />
												<input type="radio" name="lieu" value="7" onclick="heure7()" />WESTOTEL - La Chapelle sur Erdre<br />");
var retours = document.getElementById('retour');
// création d'un SPAN (vide et non rattaché au document)
var newSpan = document.createElement("SPAN");
// rattachement au conteneur de ton choix
retours.appendChild(newSpan);
// ajout de la propriété "id" à ton SPAN
newSpan.setAttribute("id", "retours");
// remplissage, ici par une simple node de texte
newSpan.appendChild(document.createTextNode(" <select name="retour">
												<option value="1h00">1h00</option>
												<option value="2h30">2h30</option>
												<option value="4h00">4h00</option>
												</select>");
 
}
function a() {
var aller = document.getElementById('aller');
// création d'un SPAN (vide et non rattaché au document)
var nouveauSpan = document.createElement("SPAN");
// rattachement au conteneur de ton choix
aller.appendChild(nouveauSpan);
// ajout de la propriété "id" à ton SPAN
nouveauSpan.setAttribute("id", "allé");
// remplissage, ici par une simple node de texte
nouveauSpan.appendChild(document.createTextNode("<input type="radio" name="lieu" value="1" onclick="heure1()" />H&ocirc;tel IBIS - Nantes Centre<br />
												<input type="radio" name="lieu" value="2" onclick="heure2()" />H&ocirc;tel IBIS - Nantes Gare Sud<br />
												<input type="radio" name="lieu" value="3" onclick="heure3()" />H&ocirc;tel FORMULE 1 - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="4" onclick="heure4()" />ETAP H&ocirc;tel - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="5" onclick="heure5()" />H&ocirc;tel CAMPANILE - Ste Luce sur Loire<br />
												<input type="radio" name="lieu" value="6" onclick="heure6()" />H&ocirc;tel IBIS - Nantes La Beaujoire<br />
												<input type="radio" name="lieu" value="7" onclick="heure7()" />WESTOTEL - La Chapelle sur Erdre<br />");
}
function r() {
var retours = document.getElementById('retour');
// création d'un SPAN (vide et non rattaché au document)
var newSpan = document.createElement("SPAN");
// rattachement au conteneur de ton choix
retours.appendChild(newSpan);
// ajout de la propriété "id" à ton SPAN
newSpan.setAttribute("id", "retours");
// remplissage, ici par une simple node de texte
newSpan.appendChild(document.createTextNode(" <select name="retour">
												<option value="1h00">1h00</option>
												<option value="2h30">2h30</option>
												<option value="4h00">4h00</option>
												</select>");
}
</script>

arf, je croyais que peut etre mon erreur venait des doubles quotes dans les createTextNode donc je les ai remplac�es par des simples et sa marche pas non plus

Pour mieux comprendre je vous rappel le lien de cette page : http://discodrive.fr/reservation_nuit_du_bois.php

**SpaceFrog** · 15/12/2008, 18h48

on append � la fin apr�s avoir defini toutes le propri�t� de l'objet ...
et seulement � ce moment l� on appende ...

**cuisto44000** · 15/12/2008, 18h57

comment sa ?

**E.Bzz** · 15/12/2008, 19h06

Envoy� par SpaceFrog

on append � la fin apr�s avoir defini toutes le propri�t� de l'objet ...
et seulement � ce moment l� on appende ...

+1
Et tout le long du code, on porte une attention particuli�re � l'imbrication des quotes

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.createTextNode("<input type='radio' name='lieu' value='1' onclick='heure1()' />......

A+

**RomainVALERI** · 15/12/2008, 19h38

Envoy� par SpaceFrog

on append � la fin apr�s avoir defini toutes le propri�t� de l'objet ...
et seulement � ce moment l� on appende ...

Hum

En effet j'ai un peu interverti les �tapes... d�sol� ^^

**cuisto44000** · 15/12/2008, 20h00

Envoy� par E.Bzz

+1
Et tout le long du code, on porte une attention particuli�re � l'imbrication des quotes

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.createTextNode("<input type='radio' name='lieu' value='1' onclick='heure1()' />......

A+

oui j'ai dit que j'avais essay� de mettre les simples quotes mais sa ne marche pas tout de meme

je ne comprends pas le terme "a la fin on appende"

**Saray** · 15/12/2008, 20h22

Il faut que tu �chappes les quotes :
Exemple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

nouveauSpan.appendChild(document.createTextNode("<input type=\"radio\" name=\"lieu\" value=\"1\" onclick=\"heure1()\" />H&ocirc;tel IBIS - Nantes Centre<br />")

**Saray** · 15/12/2008, 20h26

Il me semble de plus que les innerHTML ne marche pas bien avec les tableaux.

Et si tu essayais :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
<table>
<thead></thead>
<tbody>
<tr><td><div id="test"></div></td></tr>
</tbody>
</table>

et en javascript :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
document.getElementById("test").innerHTML="C'est un test";

Autres remarques dans le DOM il faut absolument cr�er les �l�ments THEAD et TBODY sinon �a ne marche pas.

**cuisto44000** · 15/12/2008, 20h32

merci mais sa ne marche toujours pas

**cuisto44000** · 15/12/2008, 20h47

et j'ai aussi echapp� les quotes

**SpaceFrog** · 15/12/2008, 21h40

append ... veut dire ajouter au flux html de la page

dans ton code tu appendes un textNode avec le code html des objets ...
Du grand art dans l'erreur de debutant !

Voici un exemple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var NewElt=document.createElement('div')

createElement cr�e un element, masi attention il n'est pas encore int�gr� au flux de la page ...
Avantr de l'integrer dans le flux de la page on peut lui attribuer des propri�t�s:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
NewElt.style.backgroundColor="blue";
NewElt.style.color="white";

...
on peut lui coller du text en innerHTML ou en lui appendant un textNodee

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

NewElt.appendChild(document.createTextNode('COUCOU'))

Bref on peut lui faire un tas de trucs ...

Et APRES !!!!
on l'int�gre dasn le flux de la page

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.body.appendChild(NewElt)

ici � la suite des autres elements de la page mais on peut aussi faire des insetBefore etc ...

[DOM] Erreur suite � l'ajout d'�l�ment HTML

JavaScript

Discussions similaires

Partager

Partager