[JavaScript] Différence de comportement entre IE et FF

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:

---

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

bonjour,

montre nous le code HTML de ta page ;)

Code:

---

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).

il y a une erreur :

Code:

---

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 ?

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

Voici le code corrigé

Code:

---

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

Citation:

---

Envoyé par YAMKI

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:

---

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

---

Citation:

---

Envoyé par YAMKI

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:

    ---

    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:

    ---

    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:

    ---

    1 2 3 4

    <span id="chrono">span1</span> <span id="chrono">span2</span> <span id="chrono">span3</span>

    ---

    Ici document.getElementsByName retournera 3.8O
    Mais ce code est faux car les id doivent être uniques....:bug:

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:

---

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

---

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" ...
:aie:

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:

---

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