GetElementsByName fonctionne nickel sous Firefox mais pas sous IE [Résolu]

Signaler
Messages postés
4
Date d'inscription
mercredi 23 juin 2004
Statut
Membre
Dernière intervention
5 décembre 2004
-
Messages postés
4
Date d'inscription
mercredi 23 juin 2004
Statut
Membre
Dernière intervention
5 décembre 2004
-
Bonjour,

j'ai un problème avec la fonction getElementByName sous Internet Explorer. Je tiens à préciser que sous Firefox ça marche très bien.
Alors voilà, j'ai fait un système d'onglets et quand je clique sur un onglet, je le fais apparaître autrement. Alors, pour cela j'utilise les feuilles de style en mettant l'onglet courant dans une balise DIV avec ID="current". Chaque fois que je clique sur un onglet, je lance une fonction JavaScript pour changer les attributs des balises DIV, notamment ID.
Voyez mon code, vous comprendrez mieux j'espère...

<HTML>
<HEAD>
<TITLE>Test Onglets + JavaScript</TITLE>

<!-- Fonctions JavaScript //-->
<SCRIPT LANGUAGE="JavaScript">
<!--
// Fonction qui change l'onglet courant
function changeOnglet(number_onglet) {

var liste_onglets = document.getElementsByName("onglet") ;
var texte_onglets = document.getElementsByName("texte") ;
// ===> Ces deux fonctions merdent sous IE. Quand je demande
// la valeur de liste_onglets.length et texte_onglets.length, ça me
// renvoie pour les deux 0 :-(

for(i=0; i<liste_onglets.length; i++) {
liste_onglets[i].id="";
texte_onglets[i].style.display="none" ;
}
liste_onglets[number_onglet].id="current";
texte_onglets[number_onglet].style.display="" ;
}
//-->
</SCRIPT>

<!-- Feuilles de style CSS //-->
<STYLE TYPE="text/css">

// Tout plein de feuilles de style CSS dont

#header #current {
background-image:url("left_on.gif");
}

#header #current SPAN {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
cursor:default;
}

</STYLE>

</HEAD>

<!-- Génération dynamique des onglets //-->

<LI NAME="onglet" ONCLICK="changeOnglet(0)" ID="current">
1er onglet
</LI>

<LI NAME="onglet" ONCLICK="changeOnglet(1)" ID="">
2ème onglet
</LI>

<LI NAME="onglet" ONCLICK="changeOnglet(2)" ID="">
3ème onglet
</LI>

<LI NAME="onglet" ONCLICK="changeOnglet(3)" ID="">
4ème onglet
</LI>

<LI NAME="onglet" ONCLICK="changeOnglet(4)" ID="">
5ème onglet
</LI>

<LI NAME="onglet" ONCLICK="changeOnglet(5)" ID="">
6ème onglet
</LI>

one

two

three

four

five

six

</HTML>

et donc ça ne marche pas...
J'espère que vous réussirez à m'aider

Cordialement,
Flavien

4 réponses

Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
1
que je dois à tout prix faire un getElement[s]ByName et pas un getElement[s]ById parce que je veux modifier l'ID moi... ???

Voici un extrait de la recommandation W3C :
4.10 Les éléments avec les attributs 'id' et 'name'
HTML 4 a défini l'attribut name pour les éléments a, applet, form, frame, iframe, img, and map. HTML 4 a également introduit l'attribut id. Ces deux attributs ont été conçus pour être utilisés comme des identificateurs partiels.

En XML, Les identificateurs partiels sont de type ID, et il ne peut y avoir qu'un unique attribut ID par élément.

Notez qu'en XHTML 1.0, l'attribut name de ces éléments est formellement abandonné, et il sera éliminé dans les versions suivantes de XHTML.

Adresse de la page :
http://www.la-grange.net/w3c/xhtml1/
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1
salut,

prends l'habitude d'ecrire ton code en minuscules.

2 élements ne peuvent avoir le même "name" (sauf boutons radio)

<html>
<head>
<title>Test Onglets + JavaScript</title>
<style type="text/css">
.main{
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
function changeOnglet(nb) {
for(i=1; i<7; i++) {
document.getElementById('texte'+[i]).style.display='none';
document.getElementById('texte'+[nb]).style.display='block';
}
}
//-->
</script>
</head>

<li onclick="changeOnglet(1);">
1er onglet
</li>
<li onclick="changeOnglet(2);">
2ème onglet
</li>
<li onclick="changeOnglet(3);">
3ème onglet
</li>
<li onclick="changeOnglet(4);">
4ème onglet
</li>
<li onclick="changeOnglet(5);">
5ème onglet
</li>
<li onclick="changeOnglet(6);">
6ème onglet
</li>

one

two

three

four

five

six

</html>


++

L.
Messages postés
4
Date d'inscription
mercredi 23 juin 2004
Statut
Membre
Dernière intervention
5 décembre 2004

Bonjour,

bon, j'ai essayé de faire comme vous me l'avez dit (en mettant des "NAME" différents) mais ça ne fonctionne toujours pas. Je tiens à rajouter que je dois à tout prix faire un getElement[s]ByName et pas un getElement[s]ById parce que je veux modifier l'ID moi...
J'ai essayé avec getElementByName, mais ça ne marchait pas non plus...
Voici mon code :

<HTML>
<HEAD>
<TITLE>Test Onglets + JavaScript</TITLE>

<!-- Fonctions JavaScript //-->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// Fonction qui change l'onglet courant
// J'ai essayé de faire avec :
//		onglet = document.getElementByName('onglet' + [i]) ;
//		onglet.id = "" ;
//	mais ça ne fonctionnait ni sous Firefox ni sous IE
//	alors qu'avec la version qui suit, ça ne fonctionne
//	qu'avec Firefox et pas sous IE... :-(
function changeOnglet(number_onglet, nb_onglets) {
for(i=0; i<nb_onglets; i++) {
onglet = document.getElementsByName('onglet'+[i]) ;
onglet[0].id = "";
}
onglet = document.getElementsByName('onglet'+[number_onglet]) ;
onglet[0].id="current";
}
//-->
</SCRIPT>

<!-- Feuilles de style CSS //-->
<STYLE TYPE="text/css">
#header #current {
background-image:url("left_on.gif");
}

#header #current SPAN {
 	background-image:url("right_on.gif");
 	color:#333;
padding-bottom:5px;
cursor:default;
}
</STYLE>

</HEAD>

<!-- Génération dynamique des onglets //-->

<LI NAME="onglet0" ONCLICK="changeOnglet(0,6)" ID="current">
1er onglet
</LI>
<LI NAME="onglet1" ONCLICK="changeOnglet(1,6)" ID="">
2ème onglet
</LI>
<LI NAME="onglet2" ONCLICK="changeOnglet(2,6)" ID="">
3ème onglet
</LI>
<LI NAME="onglet3" ONCLICK="changeOnglet(3,6)" ID="">
4ème onglet
</LI>
<LI NAME="onglet4" ONCLICK="changeOnglet(4,6)" ID="">
5ème onglet
</LI>
<LI NAME="onglet5" ONCLICK="changeOnglet(5,6)" ID="">
6ème onglet
</LI>

</HTML>


voilà, voilà, je vous remercie d'avance pour votre aide car là, je ne sais vraiment plus quoi faire... :sad)

Cordialement,
Flavien
Messages postés
4
Date d'inscription
mercredi 23 juin 2004
Statut
Membre
Dernière intervention
5 décembre 2004

Bonjour,

merci beaucoup, problème résolu.
Merci à tous pour votre aide.

Cordialement,
Flavien