getElementsByClassName ne marche pas

Version imprimable

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

Code:

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:

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:

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.

12/12/2013, 08h37
Bovino

Citation:

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. :whistle:

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.

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

Code:

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:

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:

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';};

12/12/2013, 18h44
NoSmoking
Bonjour,

Citation:

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:

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
:whistle::whistle::whistle::whistle::whistle:
12/12/2013, 19h07
pito2901

Que dois-je faire, c'est tout ce que je demande ???
12/12/2013, 19h28
Bovino

Citation:

il faut donc boucler sur tous les éléments

Quels sont les mots que tu ne comprends pas dans cette phrase ? :calim2:
12/12/2013, 19h31
pito2901

Bah je sais pas comment faire, c'est pour ça que j'appelle votre aide...
12/12/2013, 21h14
laurentg2003
un exemple :
Code:

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
12/12/2013, 21h15
pito2901

HEU ? ? ?

Sur mon code ça donnerai quoi au niveau du JS et du HTML ?
12/12/2013, 21h23
laurentg2003
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:

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='';} }
13/12/2013, 10h00
Kaamo
Citation:

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:

1 2 3 for (var i=0, len=nodeList.length; i < len; i++){ console.log(nodeList[i]); }
13/12/2013, 15h42
laurentg2003

Oui je sais merci :D mais j'ai pris l'habitude de l'utiliser ,un peu comme

Code:

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;
13/12/2013, 17h35
pito2901

Hou là ! ! ! Là je suis complètement largué...
14/12/2013, 02h13
Watilin

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 ;)
14/12/2013, 10h46
pito2901

Tout est nouveau pour moi, j'ai bien envie d'apprendre mais je ne comprends rien à vos i++ et autres...
14/12/2013, 19h41
SylvainPV

Si tu as envie d'apprendre : http://javascript.developpez.com/cours/
16/12/2013, 18h23
pito2901

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.
16/12/2013, 19h08
SylvainPV

Citation:

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... :roll:
16/12/2013, 19h29
laurentg2003

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