Sujet Précédent Sujet Suivant

GetElementsByName fonctionne nickel sous Firefox mais pas sous IE

Résolu
Harm_Flav Messages postés 4 Date d'inscription mercredi 23 juin 2004 Statut Membre Dernière intervention 5 décembre 2004 - 22 nov. 2004 à 22:54
Harm_Flav Messages postés 4 Date d'inscription mercredi 23 juin 2004 Statut Membre Dernière intervention 5 décembre 2004 - 24 nov. 2004 à 12:47
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

Réponse 1 / 4
chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005
23 nov. 2004 à 16:49
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/
3
Réponse 2 / 4
cs_leris Messages postés 419 Date d'inscription dimanche 31 août 2003 Statut Membre Dernière intervention 19 avril 2010 3
23 nov. 2004 à 02:18
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.
0
Réponse 3 / 4
Harm_Flav Messages postés 4 Date d'inscription mercredi 23 juin 2004 Statut Membre Dernière intervention 5 décembre 2004
23 nov. 2004 à 13:03
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
0
Réponse 4 / 4
Harm_Flav Messages postés 4 Date d'inscription mercredi 23 juin 2004 Statut Membre Dernière intervention 5 décembre 2004
24 nov. 2004 à 12:47
Bonjour,

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

Cordialement,
Flavien
0

Discussions similaires

getElementsByName()
xactise -
Arto_8000 -

4 réponses
getElementsByName
asmaa17 -
PetoleTeam -

6 réponses
Rejoignez-nous