Discussion :

[LO88ra]

Bonjour,

Je débute en Javascript, et j'aurais voulu avoir vos explications sur la marche à suivre car je pense que ma logique n'est pas bonne... lol

J'ai un carrousel d'images.
Les images ont une opacité à 0.5 par défaut.
Je voudrais que l'opacité passe à 1 quand je suis sur l'image "en cours" et donc quand je clique.
J'ai fait ceci mais ça ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
document.getElementById('buttonCaroussel').addEventListener('click', maFonction);
 
function maFonction() {
  var items = document.getElementsByClassName('itemcaroussel');
  var opacite = items.style.opacity;
    if (opacite < 1) {
      opacite = 1;
    }
  }

[badaze]

Il faudrait penser à réalimenter items.style.opacity avec la nouvelle valeur d'opacity.

[LO88ra]

Bonsoir badaze et merci pour ta réponse !
Par contre je comprends pas, en faisant cela ce n'est pas réalimenté justement ? :

Code :

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

1
2
3
4
5
 
var opacite = items.style.opacity;
    if (opacite < 1) {
      opacite = 1;
    }

[badaze]

Qu’est-ce qui te fais penser qu’en modifiant opacite tu modifies aussi items.style.opacity ?

[CosmoKnacki]

Code :

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

1
2
var items = document.getElementsByClassName('itemcaroussel');
var opacite = items.style.opacity;

La méthode getElementsByClassName renvoie un objet HTMLCollection (qui se manipule comme un tableau), mais cet objet n'a pas de propriété style. Ce sont les éléments qu'il contient qui disposent de cette propriété.

Si j'écris: var opacite = elt.style.opacity; (avec elt étant une image ou un block), la variable opacite va alors contenir une copie de la valeur de l'opacité de cet élément, mais en aucun cas opacite ne devient un alias de l'opacité de cet élément, c'est pourquoi, poursuivre avec opacite = 1; ne changera que la valeur de ta variable, mais pas l'opacité de l'élément. Si tu veux changer l'opacité de l'élément, il te faudra écrire: elt.style.opacity = 1;.

Le if (opacite < 1) { ne sert pas à grand chose, autant s'en passer.

Il n'y a rien dans cette fonction qui permette d'identifier l'image courante. Je ne sais pas comment est fait le code html qui va avec, mais à mon avis tu devrais ajouter à ton javascript une variable qui t'indique quelle est l'image courante (un simple entier). Je ne comprend pas non plus pourquoi tu as un bouton unique pour manipuler le carrousel, il faut poster ton code html.