querySelector ne marche pas

Version imprimable

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

Code:

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

avec une fonction associée :
Code:

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 ?

03/10/2012, 18h52
SpaceFrog

IE 8+ ?
03/10/2012, 19h16
exe2bin

non , google chrome
03/10/2012, 19h18
SpaceFrog

Chrome 4+ ?
03/10/2012, 19h37
exe2bin

Citation:

Chrome 4+ ?

là je sais pas .
cela a-t-il une importance ?
Les autres fonctions (getElementsById() ....) ne renvoient rien non plus !
03/10/2012, 20h49
NoSmoking

Bonjour,

Citation:

Envoyé par exe2bin

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

peut être parce quelles n'existent pas.

Désolé pour la faute d'orthographe :mrgreen:
le mieux c'est de voir le code , non ?

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
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>

03/10/2012, 22h09
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
03/10/2012, 22h12
arnogues
Citation:
Envoyé par exe2bin

Désolé pour la faute d'orthographe :mrgreen:
le mieux c'est de voir le code , non ?

Code:

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.
03/10/2012, 23h08
arnogues

Citation:

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...
04/10/2012, 07h08
exe2bin

Citation:

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.
04/10/2012, 08h00
Bovino

Citation:

Envoyé par exe2bin

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

developez.com si :aie:
:fleche: Comprendre document.write() en JavaScript ;)
04/10/2012, 10h55
SpaceFrog

Citation:

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 ...
06/10/2012, 07h10
NoSmoking

il faut parfois être curieux :aie:

Citation:

Envoyé par NoSmoking

- document.writeln :evil:
- ton formulaire est soumis, la fonction étant appelée sur le onsubmit.