Discussion :

[YAMKI]

Bonjour,

J'ai un petit soucis de compatibilité entre Internet Explorer et FireFox.


Dans ma page web, j'appele une fonction javascript sur un double click au sein d'un balise span.

Voici la fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function fctTest (elt)
{
	var listTest = document.getElementsByName("chrono");
 
	var cpt;
	for (cpt=0; cpt<listTest.length; cpt++)
	{
		listTest[cpt].style.display = "inline";
	}
}

Ce code marche très bien sous FireFox, mais sous IE le "getElementsByName" ne me ramene aucun element.

Quelqu'un a t'il une idée?

Merci d'avance

[Auteur]

bonjour,

montre nous le code HTML de ta page

[YAMKI]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<span id="mrqDivText0" style="white-space: nowrap; z-index: 0; position: relative; visibility: hidden; top: 0px; left: 0px;" ondblclick="fctTest(this);">
<span class="tcBannerText">Bandeau accueil &agrave; traduire<span name="chrono" style="display:none" class=" class="tcBannerText">&nbsp;&nbsp;121101388&nbsp;</span></span>
 
</span>

Voila en gros mon code. Le but est que lorsque l'utilisateur double click sur le bandeau déroulant, le chrono apparaisse. Je viens de remarquer que le paramètre "elt" que je trasmet ne sert à rien (il me servait avant et j'ai oublié de le retirer).

[Auteur]

il y a une erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<span id="mrqDivText0" style="white-space: nowrap; z-index: 0; position: relative; visibility: hidden; top: 0px; left: 0px;" ondblclick="fctTest(this);">
<span class="tcBannerText">Bandeau accueil &agrave; traduire<span name="chrono" style="display:none" class=" class="tcBannerText">&nbsp;&nbsp;121101388&nbsp;</span></span>

</span>

est-ce le copier-coller ?

[YAMKI]

Oups désolé j'ai rippé en recopiant.

Voici le code corrigé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<span id="mrqDivText0" style="white-space: nowrap; z-index: 0; position: relative; visibility: hidden; top: 0px; left: 0px;" ondblclick="fctTest(this);">
<span class="tcBannerText">Bandeau accueil &agrave; traduire<span name="chrono" style="display:none" class="tcBannerText">&nbsp;&nbsp;121101388&nbsp;</span></span>
 
</span>

Par contre entre temps j'ai fait des recherche de mon coté. Et ayant remarqué que la méthode getElementsByName() est dépréciée, j'essai de faire la meme chose en passant par getElementById(), mais bon c'est pas gagné. Mais bon je suis toujours intéressé pour savoir ce qui cause la différence de comportement entre IE et FF

[Auteur]

Par contre entre temps j'ai fait des recherche de mon coté. Et ayant remarqué que la méthode getElementsByName() est dépréciée, j'essai de faire la meme chose en passant par getElementById(), mais bon c'est pas gagné.

En effet, mieux vaut utiliser getElementById. Il te suffit de changer le paramètre name par id et appliquer 1 règle : l'id doit être unique. Après tu cibles ton élément par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var element = documenet.getElementById("chrono");

Mais bon je suis toujours intéressé pour savoir ce qui cause la différence de comportement entre IE et FF

Bon, j'ai fait quelques tests avec IE (la version 5 mais bon) et Firefox.

• Firefox fait la distinction entre l'attribut name et l'attribut id... Jusque là tout va bien
• Pour IE c'est moins évident...
  

  • Code html :

    Sélectionner tout - Visualiser dans une fenêtre à part

    1
    2
    3
    4
     
    <input type="radio"  name="radio1" checked="checked">radio 1
    <input type="radio"  name="radio1">radio 2
    <input type="radio"  name="radio1">radio 3

    Ici document.getElementsByName retournera 3... Logique
    Je crois que c'est valable aussi pour les input de type button, hidden, text, checkbox, password et sans doute pour les textarea (bref, pour les balises utilisées pour les formulaires).
  • Plus dur :
    

    Code html :

    Sélectionner tout - Visualiser dans une fenêtre à part

    1
    2
    3
    4
     
    <span name="chrono">span1</span>
    <span name="chrono">span2</span>
    <span name="chrono">span3</span>

    Ici document.getElementsByName retournera 0.
    Même chose avec les div, p, etc...
  • Par contre :
    

    Code html :

    Sélectionner tout - Visualiser dans une fenêtre à part

    1
    2
    3
    4
     
    <span id="chrono">span1</span>
    <span id="chrono">span2</span>
    <span id="chrono">span3</span>

    Ici document.getElementsByName retournera 3.
    Mais ce code est faux car les id doivent être uniques....

Conclusion : utilise document.getElementById
Une remarque en passant : l'attribut name est utile au moins pour les boutons radio tout simplement pour distinguer les différents groupes :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<input type="radio" name="radio1" checked="checked" />Groupe 1 Radio 1
<input type="radio" name="radio2" checked="checked" />Groupe 2 Radio 1
<br /><br />
<input type="radio" name="radio1" />Groupe 1 Radio 2
<input type="radio" name="radio2" />Groupe 2 Radio 2
<br /><br />
<input type="radio" name="radio1" />Groupe 1 Radio 3
<input type="radio" name="radio2" />Groupe 2 Radio 3

[TSalm]

Bonjour à tous,

Je dois avoir accés à des <select> par leur "NAME", combobox ajoutés dynamiquement.
Le getElementsByName fonctionne très bien sur Firefox, mais pour cet en**phariné de IE ... il me renvoie un ô douloureux "undefined" ...


Il me semblait qu'il ne faisait pas la distinction entre l'ID et le NAME,
j'ai donc mit au début de mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
// getElementsByName() pour IE :
 if (navigator.appName == "Microsoft Internet Explorer" ) {
     document.getElementsByName = function(name) {
       var tab = new Array();
       tab[0] = document.getElementById(name);
       return tab;
     }
 }

mais ça ne fonctionne pas...

Y a t-il une solution ?

merci