[DOM] InnerHTML, radioButton et Firefox

Version imprimable

Bonjour,

Je bataille pour exécuter un script qui marche sous IE mais pas firefox...
Voila, je souhaite tout simplement à afficher le code pour une série de radioButton.
Sous IE, le code affiché correspond à ce que j'ai à l'écran, alors qu'avec Firefox, le code affiché ne correspond pas. Après avoir sélectionné un autre radio, le code ne semble pas changer, je ne comprend pas... Faut il ré-actualiser quelque chose ??
J'ai fait un exemple vite fait pour vous montrer le problème.
L'attribut checked n'est pas mis à jour sous FireFox
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 <html> <head> <title>My Page</title> <SCRIPT type="text/javascript"> function affiche(){ alert(window.document.getElementById("l1").innerHTML); alert(window.document.getElementById("l2").innerHTML); alert(window.document.getElementById("l3").innerHTML); } </SCRIPT> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <label id="l1"><input onclick="affiche();" type="radio" name="group1" value="Milk"> Milk</label><br> <label id="l2"><input onclick="affiche();" type="radio" name="group1" value="Butter" checked> Butter</label><br> <label id="l3"><input onclick="affiche();" type="radio" name="group1" value="Cheese"> Cheese</label> </form> </body> </html>

sans doute parceque ta syntaxe de lable est bancale ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<SCRIPT type="text/javascript">
 
function affiche(){
	alert(window.document.getElementById("l1").innerHTML);
	alert(window.document.getElementById("l2").innerHTML);
	alert(window.document.getElementById("l3").innerHTML);
}
</SCRIPT>
</head>
<body>
 
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<input onclick="affiche();" type="radio" name="group1" value="Milk" /> <label id='group1_1'><label for='group1_1' id="l1"> Milk</label><br>
<input onclick="affiche();" type="radio" name="group1" value="Butter" checked  id='group1_2' /><label for='group1_2' id="l2"> Butter</label><br>
<input onclick="affiche();" type="radio" name="group1" value="Cheese"  id='group1_3' /><label for='group1_3' id="l3">Cheese</label>
 
</form>
</body>
</html>

10/04/2007, 16h46
goodpz

Y a un petit problème de syntaxe au niveau du premier <input> SpaceFrog.

A part ça, c'est vrai que firefox ne semble pas mettre à jour le innerHTML. Cependant, la propriété 'checked' est correctement mise à jour, donc c'est l'essentiel.
10/04/2007, 16h51
SpaceFrog

oui desolé c'est rectifé ...

mettre à jour le innerHTML ? c'est juste un alert ...
10/04/2007, 16h56
goodpz

En fait, je pense que le problème de jupit c'est que les innerHTML qui sont affichés via les alert() ne reflètent pas les changement des attributs checked. Le 2ième alert() affiche toujours l'attribut checked="checked" même si c'est un autre radio qui est coché.

JE n'avais pas compris ça dasn la question, mais si c'est ça dont il s'agit, la vérifiaction se ferait comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<SCRIPT type="text/javascript">
 
function affiche(){
	alert(window.document.getElementById("l1").innerHTML + "checked :" + window.document.getElementById("group1_1").checked);
	alert(window.document.getElementById("l2").innerHTML  + "checked \:" + window.document.getElementById("group1_2").checked);
	alert(window.document.getElementById("l3").innerHTML  + "checked \:" + window.document.getElementById("group1_3").checked);
}
</SCRIPT>
</head>
<body>
 
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<input onclick="affiche();" type="radio" name="group1" value="Milk" id='group1_1'/> <label  for='group1_1' id="l1"> Milk</label><br>
<input onclick="affiche();" type="radio" name="group1" value="Butter" checked  id='group1_2' /><label for='group1_2' id="l2"> Butter</label><br>
<input onclick="affiche();" type="radio" name="group1" value="Cheese"  id='group1_3' /><label for='group1_3' id="l3">Cheese</label>
 
</form>
</body>
</html>

et cela ne semble pas poser de problème particulier sous IE ni sous FFX

10/04/2007, 17h04
jupit

pour la syntaxe de label et des inputs, c'est en fait le code généré par jsf pour le tag selectOneRadio...
Comme le souligne goodpz, ce qui me gène, c'est les innerHTML ne correspondent pas à l'état actuelle de la page sous FF alors que sous IE, les innerHTML sont actualisé
10/04/2007, 17h05
SpaceFrog

ce n'est pas le innerHTML qui change, c'est juste le checked du radio et par conséquent la valeur du groupe ayant le même name ...
10/04/2007, 20h49
sekaijin

ne jamais utiliser le innerHTML c'est une antiquité qui devrait déjà avoir disparue
utilisez les attributs des éléments
le code HTML qui sert à généré les éléments du DOM sont intérprétés et au besoin corrigés
le code ne coresponds donc pas obligatoirement au contenu de la page.

le texte checked ou selected des checkbox et radio ou option dans la balise HTML est l'attribut par défaut c'est a dire celui qui sera affiché au chargement de la page et éventuellement sur un reset du formulaire
ce n'est pas la valeur checked ou selected de l'élément du DOM

relire la doc du W3C à ce sujet. il y a une certaine confusion entre le HTML et le DOM mais ce n'est pas exactement la même chose.

tous les navigateurs d'aujourd'hui utilise le DOM pour afficher une page le HTML est le langage source permetant de l'optenir mais c'est comme confondre le source d'un programme C et l'exe généré

javascript lui agit sur le DOM et pas sur le source
A+JYT