getElementsByClassName ne marche pas

**pito2901** · 11/12/2013, 20h40

Bonjour, j'ai un problème avec le fonctionnement de document.getElementsByClassName, du coup je remplace par ElementById, ce qui donne ceci:

Code CSS :

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
<style>
#prgm,
#flecheg,
#fleched {
text-decoration:underline;
}
 
#prgm:hover,
#flecheg:hover,
#fleched:hover {
color:red;
cursor: pointer;
}
 
.img_calculatrice{
width:226.5px;
height:500px;
position:absolute;
left:0px;
padding:0px;
z-index:0
}
 
#img_prgm,
#img_flecheg,
#img_fleched
{position:absolute;left:0px;z-index:1;width:226.5px;height:500px;background:transparent;padding:0px;}
</style>

Code HTML :

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
<div style="width:600px;position:relative;padding:0px;">
<span>
Voici à quoi ressemble la calculatrice Ti 82 stats.fr<br />
Je vais vous présenter les différentes fonctions de celle-ci:
</span>
</div>
<div style="width:600px;position:relative;padding:0px;">
<img class="img_calculatrice" style="background:transparent" src="http://www.zupmage.eu/i/qZMDMBhJgd.png"/>
<img id="img_prgm" src="http://www.zupmage.eu/i/nukdjCWy5i.png"/>
<img id="img_flecheg" src="http://www.zupmage.eu/i/OVl3z0vWbj.png"/>
<img id="img_fleched" src="http://www.zupmage.eu/i/kBKtvOinc4.png"/>
</div>
<div style="width:600px;position:relative;padding:0px;">
<span>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Pour commencer je vais vous dire quoi faire pour créer un programme:<br />
1°) Faites la touche <a id="prgm">prgm</a>, <a id="flecheg">flèche de gauche</a>, et entrée.<br />
2°) Entrez le nom de votre programme, avec les lettres en vert.<br />
3°) Pour quitter l'édition d'un programme, faites 2nde quitter.<br />
4°) Pour retourner à l'édition d'un programme, allez dans <a id="prgm">prgm</a>,<br />
<a id="fleched">flèche de droite</a> (EDIT) et faites entrer sur votre programme.<br />
S'il s'agit du programme en cours sur l'écran principal, faites entrer et ON.
</span>
</div>

Code JS :

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
<script>
var PRGM = document.getElementById('prgm'); //le problème se trouve à cette ligne
var IMG_PRGM = document.getElementById('img_prgm');
var FLECHEG = document.getElementById('flecheg');var IMG_FLECHEG = document.getElementById('img_flecheg');
var FLECHED = document.getElementById('fleched');var IMG_FLECHED = document.getElementById('img_fleched');
 
IMG_PRGM.style.visibility='hidden';
IMG_FLECHEG.style.visibility='hidden';
IMG_FLECHED.style.visibility='hidden';
 
PRGM.onmouseover = function(){IMG_PRGM.style.visibility='';};
PRGM.onmouseout = function(){IMG_PRGM.style.visibility='hidden';};
FLECHEG.onmouseover = function(){IMG_FLECHEG.style.visibility='';};
FLECHEG.onmouseout = function(){IMG_FLECHEG.style.visibility='hidden';};
FLECHED.onmouseover = function(){IMG_FLECHED.style.visibility='';};
FLECHED.onmouseout = function(){IMG_FLECHED.style.visibility='hidden';};
</script>

Du coup, je ne peux faire appraître l'image img_prgm que en survolant le premier prgm, sur le deuxième, ça ne fait rien.
et quand je remplace avec ClassName, le script ne marche pas entièrement.

Merci de votre aide.

**Bovino** · 12/12/2013, 08h37

getElementsByClassName ne marche pas

Oui, bien entendu. Si ton code ne fonctionne pas, c'est de la faute de getElementsByClassName et non parce que tu ne comprends pas son fonctionnement.

Comme tu ne montres pas ce que tu as essayé, il ne reste qu'à envisager la cause la plus probable de l'erreur : tu confonds élément et collection.

Comme un id est unique dans une page, getElementById() te renvoie l'élément possédant l'id passé en paramètre. Plusieurs éléments pouvant avoir la même classe, getElementsByClassName() te renvoie tous les éléments possédant cette classe, il s'agit donc d'une collection. Ensuite, tu ne peux pas appliquer les méthodes d'un élément à une collection, il faut donc boucler sur tous les éléments pour leur appliquer individuellement les méthodes voulues.

**pito2901** · 12/12/2013, 18h38

J'ai testé avec ça mais le JS ne fait pas apparaître les images au survol des liens:

Code css :

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
.prgm,
.flecheg,
.fleched {
text-decoration:underline;
}
 
.prgm:hover,
.flecheg:hover,
.fleched:hover {
color:red;
cursor: pointer;
}
 
.img_calculatrice{
width:226.5px;
height:500px;
position:absolute;
left:0px;
padding:0px;
z-index:0
}
 
#img_prgm,
#img_flecheg,
#img_fleched
{position:absolute;left:0px;z-index:1;width:226.5px;height:500px;background:transparent;padding:0px;}

Code html :

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
<div style="width:600px;position:relative;padding:0px;">
<span>
Voici à quoi ressemble la calculatrice Ti 82 stats.fr<br />
Je vais vous présenter les différentes fonctions de celle-ci:
</span>
</div>
<div style="width:600px;position:relative;padding:0px;">
<img class="img_calculatrice" style="background:transparent" src="http://www.zupmage.eu/i/qZMDMBhJgd.png"/>
<img id="img_prgm" src="http://www.zupmage.eu/i/nukdjCWy5i.png"/>
<img id="img_flecheg" src="http://www.zupmage.eu/i/OVl3z0vWbj.png"/>
<img id="img_fleched" src="http://www.zupmage.eu/i/kBKtvOinc4.png"/>
</div>
<div style="width:600px;position:relative;padding:0px;">
<span>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Pour commencer je vais vous dire quoi faire pour créer un programme:<br />
1°) Faites la touche <a class="prgm">prgm</a>, <a class="flecheg">flèche de gauche</a>, et entrée.<br />
2°) Entrez le nom de votre programme, avec les lettres en vert.<br />
3°) Pour quitter l'édition d'un programme, faites 2nde quitter.<br />
4°) Pour retourner à l'édition d'un programme, allez dans <a class="prgm">prgm</a>,<br />
<a class="fleched">flèche de droite</a> (EDIT) et faites entrer sur votre programme.<br />
S'il s'agit du programme en cours sur l'écran principal, faites entrer et ON.
</span>
</div>

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var PRGM = document.getElementsByClassName('prgm');var IMG_PRGM = document.getElementById('img_prgm');
var FLECHEG = document.getElementsByClassName('flecheg');var IMG_FLECHEG = document.getElementById('img_flecheg');
var FLECHED = document.getElementsByClassName('fleched');var IMG_FLECHED = document.getElementById('img_fleched');
 
IMG_PRGM.style.visibility='hidden';
IMG_FLECHEG.style.visibility='hidden';
IMG_FLECHED.style.visibility='hidden';
 
PRGM.onmouseover = function(){IMG_PRGM.style.visibility='';};
PRGM.onmouseout = function(){IMG_PRGM.style.visibility='hidden';};
FLECHEG.onmouseover = function(){IMG_FLECHEG.style.visibility='';};
FLECHEG.onmouseout = function(){IMG_FLECHEG.style.visibility='hidden';};
FLECHED.onmouseover = function(){IMG_FLECHED.style.visibility='';};
FLECHED.onmouseout = function(){IMG_FLECHED.style.visibility='hidden';};

**NoSmoking** · 12/12/2013, 18h44

Bonjour,

Envoyé par Bovino

... getElementsByClassName() te renvoie tous les éléments possédant cette classe, il s'agit donc d'une collection. Ensuite, tu ne peux pas appliquer les méthodes d'un élément à une collection, il faut donc boucler sur tous les éléments pour leur appliquer individuellement les méthodes voulues.

alors que tu fais

Code :

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

1
2
3
var PRGM = document.getElementsByClassName('prgm')
//.. un peu de code puis
PRGM.onmouseover = function(){IMG_PRGM.style.visibility='';};

prend le temps de lire correctement les réponses

**pito2901** · 12/12/2013, 19h07

Que dois-je faire, c'est tout ce que je demande ???

**Bovino** · 12/12/2013, 19h28

il faut donc boucler sur tous les éléments

Quels sont les mots que tu ne comprends pas dans cette phrase ?

**pito2901** · 12/12/2013, 19h31

Bah je sais pas comment faire, c'est pour ça que j'appelle votre aide...

**laurentg2003** · 12/12/2013, 21h14

un exemple :

Code :

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

1
2
3
4
5
6
7
8
var oClasse=document.getElementsByClassName('maClasse');
 
for(var i=0;i<oClasse.length;i++){
 
alert(oClasse.item(i));
 
 
}

oClasse est un objet nodeList :une collection d’éléments
tu peux appliquer à chaque élément ses propriétés d'objet HTMLelement
http://krook.org/jsdom/index-all.html

**pito2901** · 12/12/2013, 21h15

HEU ? ? ?

Sur mon code ça donnerai quoi au niveau du JS et du HTML ?

**laurentg2003** · 12/12/2013, 21h23

Je pense que tu dois utiliser l'api selectors de html5 et les pseudo classes css3 et modifier l'objet style à la volée ou utiliser jQuery pour ça
Ci dessous ton bout de code modifier

Code :

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

1
2
3
4
5
6
var PRGM = document.getElementsByClassName('prgm')
 
for(var i=0;i<PRGM.length;i++){
PRGM.item(i).onmouseover = function(){IMG_PRGM.style.visibility='';}
 
}

**Kaamo** · 13/12/2013, 10h00

HEU ? ? ?

Sur mon code ça donnerai quoi au niveau du JS et du HTML ?

Tu as toutes les billes pour adapter ton code à l'aide des codes fournis. Te donner la solution finale ne serait pas t'aider.
Essaie d'adapter toi même et reviens nous voir si tu as des problèmes en amenant ton bout de code avec toi

@laurentg2003, la méthode item de NodeList est un peu inutile, ça revient à faire :

Code javascript :

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

1
2
3
for (var i=0, len=nodeList.length; i  <  len; i++){
  console.log(nodeList[i]);
}

**laurentg2003** · 13/12/2013, 15h42

Oui je sais merci

mais j'ai pris l'habitude de l'utiliser ,un peu comme

Code :

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

localStorage.("cle","valeur"); localStorage["cle"]="valeur";

ce sont des tableaux associatifs (des objets)donc les 2 sont possibles là ou c'est assez fort c'est monObjet["valeur"];monObjet.valeur;

**pito2901** · 13/12/2013, 17h35

Hou là ! ! ! Là je suis complètement largué...

**Watilin** · 14/12/2013, 02h13

Pito, moi je vois déjà un problème avec ton code HTML, qui dénote un manque d'organisation. Il y a plein de <br>. Certains servent à faire de l'espacement : utilise plutôt une règle CSS qui ajoute de la marge ou du padding à un des éléments conteneurs. D'autres servent à mettre à la ligne des éléments de liste : utilise à la place de vraies listes, <ul> ou <ol>.

Pour ton code, ce que tout le monde (à peu près) te conseille de faire, c'est ni plus ni moins qu'une boucle for. Tu sais faire ça je crois

Comme Kaamo l'a dit, on ne t'aidera pas en te donnant une solution pré-mâchée. C'est à toi de mettre les mains dans le cambouis si tu veux apprendre quelque chose

**pito2901** · 14/12/2013, 10h46

Tout est nouveau pour moi, j'ai bien envie d'apprendre mais je ne comprends rien à vos i++ et autres...

**SylvainPV** · 14/12/2013, 19h41

Si tu as envie d'apprendre : http://javascript.developpez.com/cours/

**pito2901** · 16/12/2013, 18h23

Très drôle, cependant je ne maîtrise pas tout et je ne vois absolument pas quoi prendre dans votre cours complexe.

Finalement, je prend la solution de laurentg2003 qui marche très bien.

**SylvainPV** · 16/12/2013, 19h08

Envoyé par pito2901

Très drôle, cependant je ne maîtrise pas tout et je ne vois absolument pas quoi prendre dans votre cours complexe.

Parce que tu pensais que c'était une blague ? Tous les cours que les contributeurs ont rédigé bénévolement et mis à disposition de tous, c'était par pure plaisanterie ??? Ce sont des cours de base, une introduction au langage, écrits justement pour les débutants. Si tu es obligé de copier/coller le code de laurent parce que tu ne sais pas comment on écrit une boucle en JavaScript, tu ne vas pas aller loin...

**laurentg2003** · 16/12/2013, 19h29

Ravi que mon code te serve(en même temps ce sont les bases) ,mais Sylvain a raison ,si tu souhaite vraiment faire du développement tu dois en apprendre les bases :les boucles par exemple pour comprendre ce que signifie ce i++
Pour cela tu as de très bons tutos ici même rédigés bénévolement et tu verra que la programmation peut même être un jeu

et que ça n'a rien de compliqué.

getElementsByClassName ne marche pas

JavaScript

Discussions similaires

Partager

Partager