balise div non visible par getElementById

Version imprimable

Salut,

Je suis en train de me former à javascript, et je galère sur un cas qui me semble simple depuis une journée maintenant...

voici mon code HTML :
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 <HTML> <HEAD> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> <script type="text/javascript" src="javascript/prototype.js"></script> <TITLE> in dev </TITLE> </HEAD> <BODY> <FORM name="administrative" method="post" action="#"> species : <SELECT name="species" id="choiceSpecies" onfocusin="population.populate_species()"> <OPTION value="NA">NA</OPTION> <div id="speciesOptions" > <OPTION value="NA">NA</OPTION> </div> </SELECT> <br/><input id="data" autocomplete="off" size="83" type="text" value="" onfocusin="population.populate_data()"/> </FORM> <script type="text/javascript" src="js_code.js"></script> </BODY> </HTML>
et voici mon code javascript :
Code:

1 2 alert(document.getElementById('choiceSpecies')[0].nodeType); alert(document.getElementById('speciesOptions')[0].nodeType);
Le résultat : j'ai le type de la balise SELECT qui est affiché, mais javascript ne retourne rien pour le deuxieme appel, concernant le type de la balise div.

Quelqu'un saurait me dire pourquoi?
merci!

19/05/2010, 17h28
SpaceFrog

contrairement à getElementsByName ou getElementsByTagName getElementById ne retourne pas une collection puisque un id est unique sur la page ...
On remarquera dans la syntaxe l'absence de pluriel à Element ...

Code:

alert(document.getElementById('choiceSpecies').nodeType);

merci pour ta réponse!
Effectivement la notation d'accès au tableau était en trop.
Cependant, cela ne résout pas le problème. En simplifiant mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<HTML>
<HEAD>
	<script type="text/javascript" src="javascript/prototype.js"></script>
	<TITLE> in dev </TITLE>
</HEAD>
<BODY>
 
<FORM name="administrative" method="post" action="#">
		species : <SELECT name="species" id="choiceSpecies">
				<OPTION value="NA">NA</OPTION>
				<div id="speciesOptions" >
					<OPTION value="NA">NA</OPTION>
				</div>
			  </SELECT>
 
 
</FORM>
<script type="text/javascript">
	alert(document.getElementById('speciesOptions').nodeType);
</script>	
 
</BODY>
</HTML>

aucun message s'affiche.

19/05/2010, 18h22
Auteur
bonjour;
Code:

1 2 3 4 <div id="speciesOptions" > <OPTION value="NA">NA</OPTION> </div>
8O
On ne peut pas encadrer de balise option d'un div ni même écrire une balise HTML dans une balise option.

En passant : écris toutes tes balises HTML en minuscules, sinon ça ne passe pas la validation W3C.
20/05/2010, 10h35
bluemartini

Merci beaucoup! :ccool:
Effectivement c'est de là que venait le problème. Par contre, je ne comprend pas cette règle. Pourquoi définir qu'un select ne possède que des balises option?
Et merci pour le conseil W3C, c'est enregistré!
20/05/2010, 11h12
SpaceFrog

le html est un langage structuré ...
pourquoi definir qu'une page html doit avoir un head et un body ...
un select est ainsi fait ...