querySelector ne marche pas

**exe2bin** · 03/10/2012, 17h59

bonsoir tous ,
j'ai un formulaire avec un bouton associé à l'évènement onclick :

Code :

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

<button onclick="changeConges(document.formulaire);">OK</button>

avec une fonction associée :

Code :

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

1
2
3
4
5
6
7
8
9
function changeConges(formulaire)
{
	var mois=formulaire.mois.value;// récupérer les valeurs des champs Mois et Jour
	var jour=formulaire.jour.value;
	document.writeln('<pre>' + mois + jour + '</pre>');
	// récupérer le noeud du jour ciblé
	var noeud_cible=document.querySelector('tr#mars');
	document.writeln(noeud_cible);
}

le soucis c'est que la fonction écrit : Null
Ce qui signifie que l'élément recherché n'a pas été trouvé.
Je ne comprend pas pourquoi ?

**SpaceFrog** · 03/10/2012, 18h52

IE 8+ ?

**exe2bin** · 03/10/2012, 19h16

non , google chrome

**SpaceFrog** · 03/10/2012, 19h18

Chrome 4+ ?

**exe2bin** · 03/10/2012, 19h37

Chrome 4+ ?

là je sais pas .
cela a-t-il une importance ?
Les autres fonctions (getElementsById() ....) ne renvoient rien non plus !

**NoSmoking** · 03/10/2012, 20h49

Bonjour,

Envoyé par exe2bin

Les autres fonctions (getElementsById() ....) ne renvoient rien non plus !

peut être parce quelles n'existent pas.

**exe2bin** · 03/10/2012, 20h54

Désolé pour la faute d'orthographe

le mieux c'est de voir le code , non ?

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE HTML>
<html>
<head>
<title>Recap</title>
<style>
#navbar {
	background: rgb(25%,20%,75%);
	height: 25px;
	width: 100%;
}
span.verticalbar {
	color: rgb(164,218,37);
	margin-right: 0em;
	margin-left: 0em;
}
.navlink {
	margin-left: 0.25em;
	margin-right: 0.25em;
	color: white;
	text-decoration: none;
}
.janvier {;}
</style>
<script>
function changeConges(formulaire)
{
	var mois=formulaire.mois.value;// récupérer les valeurs des champs Mois et Jour
	var jour=formulaire.jour.value;
	document.writeln('<pre>' + mois + jour + '</pre>');
	// récupérer le noeud du jour ciblé
	var noeud_cible=document.querySelector('tr#mars');
	document.writeln(noeud_cible);
}
</script>
</head>
<body>
<?php
        if (file_exists('Calendrier2012.xml'))
        {
        $xml = simplexml_load_file('Calendrier2012.xml');
 
    }
        else
        {
        exit('Echec lors de l\'ouverture du fichier Calendrier2012.xml.');
        }
?>
<h3 style="align:center">Calendrier</h3>
<table border="1">
	<tr align="center" style="font-weight:bolder;font-size:10pt;"><td/>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
		<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
		<td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td>
	</tr>
	<?php
                $numero_mois=0;
                foreach($xml->mois as $month)
                {
                        echo '<tr id="'.$month.'"><td style="font-size:10pt">'.$month.'</td>';
                        $numero_jour=1;
                        foreach($xml->mois[$numero_mois]->j as $jour)
                        {
                                switch($jour)
                                {
                                        case 'RH' :
                                                echo '<td id="'.$numero_jour.'" style="background-color:orange;font-size:10pt">'.$jour.'</td>';
                                                break;
                                        case 'CA' :
                                                echo '<td id="'.$numero_jour.'" style="background-color:#f080d0;font-size:10pt">'.$jour.'</td>';
                                                break;
                                        case 'RT' :
                                                echo '<td id="'.$numero_jour.'" style="background-color:#40f040;font-size:10pt">'.$jour.'</td>';
                                                break;
                                        case 'HP' :
                                                echo '<td id="'.$numero_jour.'" style="background-color:#80f0d0;font-size:10pt">'.$jour.'</td>';
                                                break;
                                        case 'JS' :
                                                echo '<td id="'.$numero_jour.'" style="background-color:#f04040;font-size:10pt">'.$jour.'</td>';
                                                break;
                                        case 'FR' :
                                                echo '<td id="'.$numero_jour.'" style="background-color:#f04040;font-size:10pt">'.$jour.'</td>';
                                                break;
                                        case 'FP' :
                                                echo '<td id="'.$numero_jour.'" style="background-color:#4080f0;font-size:10pt">'.$jour.'</td>';
                                                break;
                                        case 'RR' :
                                                echo '<td id="'.$numero_jour.'" style="background-color:#4080f0;font-size:10pt">'.$jour.'</td>';
                                                break;
                                        default :
                                                echo '<td id="'.$numero_jour.'" style="background-color:#f0f080;font-size:10pt">'.$jour.'</td>';
                                }
                                $numero_jour++;
                        }
                        $numero_mois++;
                        echo '</tr>';
                }
        ?>
</table>
<div id="navbar">
	<a class="navlink" href="">Congés Annuels</a><span class="verticalbar">|</span>
	<a class="navlink" href="">RTT</a><span class="verticalbar">|</span>
	<a class="navlink" href="">FP</a><span class="verticalbar">|</span>
</div>
<form name="formulaire">
	CA<input type="radio" name="type" value="ca"/>
	RH<input type="radio" name="type" value="rh"/>
	RT<input type="radio" name="type" value="rt"/>
	HP<input type="radio" name="type" value="hp"/>
	JS<input type="radio" name="type" value="js"/>
	FR<input type="radio" name="type" value="fr"/>
	FP<input type="radio" name="type" value="fp"/>
	RR<input type="radio" name="type" value="rr"/>
	Otaf<input type="radio" name="type" value="otaf"/><br/>
	Mois :<input type="text" name="mois" maxlength="10"/>
	Jour :<input type="text" name="jour" maxlength="2"/>
	Duree :<input type="text" name="duree"maxlength="2"/><br/>
	<button onclick="changeConges(document.formulaire);">OK</button>
</form>
</body>
</html>

**SpaceFrog** · 03/10/2012, 22h09

Plusieurs regles de base que ton script ne semble pas respecter
- un id doit etre unique sur la page
- un id ne doit jamais etre uniquement numérique
- un id ne soit jamais commencer par un numérique

**arnogues** · 03/10/2012, 22h12

Envoyé par exe2bin

Désolé pour la faute d'orthographe

le mieux c'est de voir le code , non ?

Code :

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

1
2
<!DOCTYPE HTML>
code un peu moche, mais on fera avec...

As tu réfléchis un petit peu à l'incidence de document.writeln() sur ta page ?

Quand la page se charge et que tu fais un document.wrile ou writeln, le texte sera inscrit comme si le HTML avait été généré avant.

Donc si tu appelles document.writeln à l'intérieur d'une fonction après que ta page a été chargée, alors le dom sera entièrement détruit, d'où le fait que donc querySelector("tr#mars"), retournera null.

**arnogues** · 03/10/2012, 23h08

Envoyé par SpaceFrog

Plusieurs regles de base que ton script ne semble pas respecter
- un id doit etre unique sur la page
- un id ne doit jamais etre uniquement numérique
- un id ne soit jamais commencer par un numérique

En fait d'après la reference HTML du W3C un id peut être composé de tous les caratères qu'on veut, sauf d'espaces \s, \n, \r, \t, etc...

**exe2bin** · 04/10/2012, 07h08

Envoyer par : arnogues
Donc si tu appelles document.writeln à l'intérieur d'une fonction après que ta page a été chargée, alors le dom sera entièrement détruit, d'où le fait que donc querySelector("tr#mars"), retournera null.

Magnifique !!
j'avoue ne pas y avoir penser une seconde .....
Comme tu l'as deviné je débute en dev-web et les livres ne disent pas tout
ou alors il faut trouver la bonne page .
Merci à tous pour votre aide précieuse.

**Bovino** · 04/10/2012, 08h00

Envoyé par exe2bin

Comme tu l'as deviné je débute en dev-web et les livres ne disent pas tout

developez.com si

Comprendre document.write() en JavaScript

**SpaceFrog** · 04/10/2012, 10h55

En fait d'après la reference HTML du W3C un id peut être composé de tous les caratères qu'on veut, sauf d'espaces \s, \n, \r, \t, etc...

Moi je veux bien ...
Mais as tu seulement déjà essayé d'utiliser des id numériques, ça pose des soucis de conflits avec les nommages internes de IE...

Je persiste donc à recommander pas uniquement de numérique ni commencer par du numérique ...