11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Comportement .value et .length entre IE et Firefox

Bonjour,
j'ai un problème dans un script avec length et value. Ca ne fonctionnait pas sous IE
(6 et 8), j'ai fini par le tester sous Firefox. Et, là, miracle tout fonctionne! Smiley eek

J'ai redécomposé le script et isolé les instructions qui posaient problème.
Un petit code de test comme celui-ci montre que length et value (tels que j'ai codé, désolé par avance, je suis débutant en javascript...) un comportement différent entre les 2 navigateurs.
Sous firefox ces 2 lignes donnent bien un résultat alors que sous IE, non!

document.write("<br />Nb de lignes du formulaire: ",document.slideform.slide.length);
document.write("<br />",document.slideform.slide.options[document.slideform.slide.selectedIndex].value);


Voici le code de test complet:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor,  www.pspad.com">
 
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    current=0;
    function change() {
      document.write("L'index de la ligne est: ",document.slideform.slide.selectedIndex);
      document.write("<br />Nb de lignes du formulaire: ",document.slideform.slide.length);
      document.write("<br />",document.slideform.slide.options[document.slideform.slide.selectedIndex].value);
    }
  </script>
  <form name="slideform" action="" id="slideform" style="margin:2px">
  <!--  <select name="slide" onchange="document.write(document.slideform.slide.selectedIndex+1);"> -->
    <select name="slide" onchange="change();">
    <option value=""> Choisir </option>
    <option value="Photo 1"> Ligne 1 </option>
    <option value="Photo 2"> Ligne 2 </option>
    </select>
  </form>
  </body>
</html>


Pouvez-vous m'aider à trouver les erreurs? Smiley ohwell
Merci d'avance.
Modifié par BobMorane (26 Dec 2009 - 17:10)
Salut,

tout d'abord quelques remarques générales :

* ton doctype est invalide car tronqué. Pour partir sur de bonnes bases utiliser le Squelettor.

* il est déconseillé de déclarer un encodage windows-1250. Lire S'y retrouver entre ASCII, ANSI, Latin1, ISO-8859-1, MacRoman, Windows-1252, etc.

* la façon de cibler tes éléments en JavaScript est un peu "dépassée" : on utilise plutôt le DOM maintenant.

* lorsqu'on utilise document.write il faut échapper les / en \/

* je suppose que ce n'est qu'un test mais dans la vraie vie ton formulaire poserait des problèmes d'accessibilité :
lire http://openweb.eu.org/articles/formulaire_accessible
et Comment bien coder en Javascript.


Un petit exemple de ce que ça pourrait donner (sans corriger les problèmes d'accessibilité) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
</head>
<body>
<form action="" id="slideform" style="margin:2px">
	<p>
	<select name="slide" id="slide" onchange="change();">
		<option value=""> Choisir </option>
		<option value="Photo 1"> Ligne 1 </option>
		<option value="Photo 2"> Ligne 2 </option>
	</select>
	</p>
</form>
<script type="text/javascript">
function change() {
	var oSelect = document.getElementById('slide');
	alert("L'index de la ligne est: " + oSelect.selectedIndex);
	alert("Nb de lignes du formulaire: " + oSelect.length);
	alert("Valeur: " + oSelect.options[oSelect.selectedIndex].value);
}
</script>
</body>
</html>
Bonjour Heyoan,
merci pour ton aide! Effectivement ton code fonctionne à la fois sous IE et Firefox! Smiley biggrin
Je vais regarder avec intérêt tes deux liens... et ce fameux DOM. Comme indiqué, je débute en javascript Smiley cligne

Deux petites questions subsidiaires,
1) Je ne comprends pas ta phrase:
* lorsqu'on utilise document.write il faut échapper les / en \/
2) si je voulais quand même utiliser document.write dans la fonction change()
(à la place du alert() )
quelle serait la bonne syntaxe? Smiley lol

Merci encore.
1) et 2) Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test</title> 
</head> 
<body>
<div id="message"></div>
<form action="" id="slideform" style="margin:2px"> 
    <p> 
    <select name="slide" id="slide" onchange="change();"> 
        <option value=""> Choisir </option> 
        <option value="Photo 1"> Ligne 1 </option> 
        <option value="Photo 2"> Ligne 2 </option> 
    </select> 
    </p> 
</form> 
<script type="text/javascript">
<!-- 
function change() { 
    var oSelect = document.getElementById('slide');
	document.getElementById('message').innerHTML = "L'index de la ligne est: " + oSelect.selectedIndex + "<br />Nb de lignes du formulaire: " + oSelect.length + "<br />Valeur: " + oSelect.options[oSelect.selectedIndex].value;
} 

document.write('<p>Test<\/p>');
-->
</script> 
</body> 
</html>
Sujet clos
Aller à