[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