Boucle sur collection getElementsByName

**Gwen_59** · 20/05/2012, 17h10

Bonjour,

Je fais face à un problème de Javascript sous Internet Explorer. En fait, j'appelle une fonction JS sur un lien a href, qui affiche des éléments. J'ai un tableau tout préparé en fait, avec uniquement la première ligne affichée (les autres sont en display:none). La fonction javascript permet donc d'afficher les autres lignes si on clique sur le premier élément du tableau. Aucun souci sous Firefox mais rien ne se passe sous IE .

Fonction Javascript :

Code :

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

1
2
3
4
5
6
7
8
 
function afficher() {
     var groupe = document.getElementsByName("tranche");
 
	for(i in groupe){
		groupe[i].style.display='block';
	}
}

J'ai également le même type de problème pour changer la propriété vAlign (l'alignement vertical) mais c'est moins "grave".

Merci d'avance

**SpaceFrog** · 20/05/2012, 17h55

la boucle for in est malvenue dans ce cas de figure ...
tu boucles sur les propriétés de la collection ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<script type="text/javascript">
function afficher() {
     var groupe = document.getElementsByName("tranche");
 	for(i in groupe){
		alert(i)
	}
}
afficher()
</script>

il faut soit faire un for jusque length

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<script type="text/javascript">
function afficher() {
     var groupe = document.getElementsByName("tranche");
 	for(i=0;i< groupe.length){
		alert(groupe[i].innerHTML)
	}
}
afficher()
</script>

soit un while sur l'indexe de la collection

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<script type="text/javascript">
function afficher() {
     var groupe = document.getElementsByName("tranche");
     var i=-1;
 	while( groupe[++i]){
		alert(groupe[i].innerHTML)
	}
}
afficher()
</script>

**Gwen_59** · 20/05/2012, 18h26

Merci pour ta réponse.

Mais je rencontre un souci et j'ai d'ailleurs essayé avec ton exemple simple avec des div et avec IE, il ne recupere pas les elements. C'est à dire que groupe.length =0, alors que dans Firefox ou Chrome, il remplie bien la collection ...

**SpaceFrog** · 20/05/2012, 20h03

C'est à dire que groupe.length =0,

heu tu peux me montrer un exemple avec le html associé ?

name ou id ?

**Gwen_59** · 21/05/2012, 08h29

J'ai repris l'exemple simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head><script type="text/javascript">
function afficher() {
     var groupe = document.getElementsByName("tranche");
	 alert("nb d elements " + groupe.length);
     var i=-1;
 	while( groupe[++i]){
		alert(groupe[i].innerHTML)
	}
}
</script></head>
<body>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<div name="tranche">foo</div>
<button onclick="afficher()">Ici</button>
 
</body>
</html>

Sous Firefox et Chrome, il trouve bien les 10 éléments, mais 0 avec IE ...
J'ai donc le même problème dans mon application

**SpaceFrog** · 21/05/2012, 08h42

A priori IE cantonne l'attribut name aux éléments de formulaire de type input, textarea ...

Colle à tes éléments un id incrémenté tranche_1 tranche_2
et récupères la collection avec en t'inspirant de cette contribution :
http://www.developpez.net/forums/d75...filtre-regexp/

ou si tu utilise jquery avec un selecteur [id^=tranche_]

**Gwen_59** · 21/05/2012, 22h14

J'utilise déjà ID pour autre chose. Il n' y a pas d'autres moyens ? :/

**NoSmoking** · 21/05/2012, 23h06

Envoyé par SpaceFrog

A priori IE cantonne l'attribut name aux éléments de formulaire de type input, textarea ...

tout à fait, IE étant rigoureux sur ce coup.

Envoyé par Gwen_59

J'utilise déjà ID pour autre chose

une ID doit être UNIQUE mais on peut en mettre autant que l'on veut.

Envoyé par Gwen_59

Il n' y a pas d'autres moyens ? :/

la méthode décrite par SpaceFrog est une bonne méthode, je parle des ID tranche_1, tranche_2...etc si l'on n'utilise pas jQuery.

Sinon tu peux encore encapsuler ces DIV dans un parent et récupérer la collection de DIV contenues

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head><script type="text/javascript">
function afficher() {
  var oParent = document.getElementById('conteneur');
  var groupe  = oParent.getElementsByTagName('DIV');
  alert("nb d elements " + groupe.length);
  var i=-1;
  while( groupe[++i]){
    groupe[i].innerHTML += ' ' +(i+1);
  }
}
</script></head>
<body>
  <div id="conteneur">
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
  </div>
  <button onclick="afficher()">Ici</button>
</body>
</html>

Boucle sur collection getElementsByName

JavaScript

Discussions similaires

Partager

Partager