Carrousel JS - PB fonction

Par Zoriko, il y a 2 ans

Javascript

Bonjour à tous,

Pour m'entrairer au JS, j'ai créé un Carrousel en JS, qui marche plutôt bien.
Seulement, voyant que je répète mon code plusieurs fois, j'ai voulu faire une fonction.

Et alors ce même code qui marchais très bien (celui en commentaire), ne marche plus du tout à présent (celui en bas).

Pourriez-vous m'indiquer la source de mon erreur svp ?

Merci d'avance de votre temps et de votre réponse.

Voici le code :

const barreDroite = document.querySelector(".droite"); const barreGauche = document.querySelector(".gauche"); const image = document.querySelector(".image"); const nombre = document.querySelector(".position") const carrousel = document.getElementsByClassName("carrousel").src="img/1.jpg"; let position = 1; function update(position, image, nombre) { image.src = `img/${position}.jpg` nombre.innerHTML = `Position : ${position}` } // barreDroite.addEventListener("click", () => { // if (position < 7) { // position++ // image.src = `img/${position}.jpg` // nombre.innerHTML = `Position : ${position}` // } // else { // position = 1 // image.src = `img/${position}.jpg` // nombre.innerHTML = `Position : ${position}` // } // }); barreDroite.addEventListener("click", () => { if (position < 7) { position++; update(position, image, nombre); } else { position = 1; update(position, image, nombre); });

Ce que je veux

Je voudrais remplacer les lignes en commentaires, par celle du bas.

Ce que j'obtiens

Plus rien ne marche.

3 réponses

Jessy Brs, il y a 2 ans

Salut,

erreur :
Je n'ai pas l'impression que ton "else" soit fermée déjà.
Tu n'as pas d'erreur de code quand tu ouvres la console de ton navigateur.

Proposition 1
const carrousel = document.getElementsByClassName("carrousel").src="img/1.jpg"; // cible juste t'as classe, voir mon l'id du carousel ? Pourquoi une image ?
const image = document.querySelector(".image"); Ensuite tu peux cibler les images à l'intérieur de ton carousel

Là c'est juste des idées d'améliorations possible pour une meilleure visibilité.

Proposition 2 :
Le 7 dans ta condition position. Tu pourrais créer une constante, ça serait plus jolie et maintenable
const maxPosition = 7.

Puis tu peux créer deux méthode pour ta barre à droite. Et ta barre à gauche.

En tout cas top le faite d'avoir penser à faire une fonction ! Ton code est clair ! c'est très rare ^^

Zoriko, il y a 2 ans

Salut,

Merci beaucoup pour ta réponse !
Putain oui c'était juste mon else, je me sens con d'avoir fait un post pour ça ... désolé.

La const image je l'avais réctifié, par contre j'ai direct appliqué ta const maxPos c'est top, merci !

Pour la méthode je suis pas sur de voir l'utilité, ça fera pas moins de code non ? Et ça risque pas d'être réutilisé.
Donc clairement je passe à coté de qqc ... Je vais fouiller.

Sinon si quelqu'un tombe sur ce problème et qu'il veut y voir plus clair, voici le github de mon projet :
https://github.com/Zoriko81/Carrousel
Et la page pour visu : https://zoriko81.github.io/Carrousel/

Merci pour le retour :)

Jessy Brs, il y a 2 ans

Oui non t'inquiète, c'est fait pour. Des erreurs bêtes tu vas en faire pleins. Et moi aussi d'ailleurs ahah !

Une méthode, ça permet aussi d'avoir du code claire.
C'est plus logique d'avoir une methode " barre droite" et "barre gauche". C'est plus maintenable
En tout cas top ton carouselle, super jolie ! :D