Problème de navigation : blocage à la dernière citation du tableau

Question

Bonjour,
J'ai réalisé un autre code qui me donne le même résultat en me permettant de parcourir tout mon tableau en ordre, mais lorsque j'arrive à la dernière citation, je n'ai plus la possibilité de continuer.
Voici un lien pour retrouver ce code :
https://codepen.io/Haphiz-OUARMA/pen/BagRMBX

Maxime Delville · Accepted Answer

Premièrement, je vois que tu te répètes avec textContent . Tu peux faire comme ça :
btn.addEventListener('click', () => {
i++;
citation.textContent = citations[i][t];
auteur.textContent = citations[i][t + 1];
if (pass == true) {
pass = false;
} else {
pass = true;
}
});
Et, pour retourner à la première quand tu es à la fin, tu peux ajouter une condition pour savoir si on est arrivé à la fin, c'est-à-dire que i est égal à la taille du tableau - 1 (j'ai mis une condition linéaire pour gagner en place) :
citations.length - 1 == i ? i = 0 : i++
D'ailleurs, je n'ai pas bien compris à quoi servait la condition avec pass , puisque finalement, dans les deux, tu fais la même chose, à part changer une valeur qui sert uniquement à cette condition ? Donc je l'ai retirée, ça donne ça :
btn.addEventListener('click', () => {
citations.length - 1 == i ? i = 0 : i++;
citation.textContent = citations[i][t];
auteur.textContent = citations[i][t + 1];
});
C'est bien ça que tu voulais faire ?

Haphiz Ouarma · Answer

Oui, ça réduit davantage le code, c’est formidable, mais je n’ai pas vraiment accordé beaucoup d’importance à la réduction de mon code. J’ai cherché plutôt une autre façon d’avoir le même résultat. Par contre, ce qui me dérangeait le plus, c’est de pouvoir cliquer sur la div "nouvelle citation" de manière infinie, sans pour autant changer l’entièreté de mon code. Merci encore pour ta correction, c’est formidable.

Maxime Delville · Answer

Bah, on ne peut pas tellement, enfin si, mais une partie ne servira à rien :
btn.addEventListener('click', () => {
if (pass == true) {
citations.length - 1 == i ? i = 0 : i++;
citation.textContent = citations[i][t];
auteur.textContent = citations[i][t + 1];
pass = false;
} else {
citations.length - 1 == i ? i = 0 : i++;
citation.textContent = citations[i][t];
auteur.textContent = citations[i][t + 1];
pass = true;
}
});
En gros, ça ferait un truc dans ce genre.

Haphiz Ouarma · Answer

btn.addEventListener('click', () => {
citations.length - 1 == i ? i = 0 : i++
citation.textContent = citations[i][t];
auteur.textContent = citations[i][t + 1];
});
les modif que tu as proposé me plaisent beaucoup sa m évite surtout de me répeter et sa rend encore le code plus cohérent j aime bien.Surtout l usage de la condition ternaire waouh; j avais pensé a utilisé une condition finalement j avais pas trop envie de me prendre la tête 😂.

Maxime Delville · Answer

Râvi d'avoir pu t'aider

Problème de navigation : blocage à la dernière citation du tableau

Formation JavaScript (legacy)