Valeur précédente ou suivante dans un tableau au click

Résolu/Fermé

anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 - 11 juin 2022 à 20:43
anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 - 12 juin 2022 à 21:11

Bonjour,

Salut à vous,

Alors voila j'aimerais qu'au click d'un élément (element.childNodes[1 ou 5]) l'index du tableau (dans l'exemple il est de 7) passe à l'index d'avant ou celui d'après

   <div class="arrow"> // ma div comportant mes flèches
                    <a href=""><img src="assets/img/arrow.svg" alt=""></a> // ma première flèche donc element.childNodes[1]
                    <p class="date"></p>
                    <a href=""><img src="assets/img/arrow.svg" alt=""></a> // ma seconde flèche donc element.childNodes[5]
   </div>

tab_date = [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022];
const arrow = document.querySelectorAll('.arrow');
arrow.forEach(element => {
    console.log(element.childNodes[5]);
    element.childNodes[3].innerHTML = tab_date[7]; // index actuel de mon tableau dans mon élément p class date 
    element.childNodes[1].addEventListener('click', ()=>{
      /* element.childNodes[3].innerHTML =  ? ; */ // valeur précédente de mon tableau donc 2021
    })
    element.childNodes[5].addEventListener('click', ()=>{
      /* element.childNodes[3].innerHTML =  ? ; */ // valeur suivante de mon tableau donc 2015
    })
  });

Configuration: Windows / Chrome 102.0.0.0

A voir également:

Valeur précédente ou suivante dans un tableau au click
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Comment faire un tableau - Guide
Trier un tableau excel - Guide
Comment imprimer un tableau excel sur une seule page - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
12 juin 2022 à 19:43

Bonjour,

Si personne ne répond .. ça ne sert à rien de mettre des petits "up" ....
En général, c'est simplement que :
- La question n'est pas claire
- Ou que les personnes n'ont pas le temps ..

Pour ma part .. j'ai eu beau tourner ton message dans tous les sens.. je ne comprends pas ce que tu essaies de faire....
Peut-être que si tu partageais.. par exemple... le code html complet.. ça pourrait aider.

anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 6
Modifié le 12 juin 2022 à 20:05

Bha je demande juste si quelqu'un peux m'aider je comprend que les personnes peuvent être occupé sa me dérange pas.

Bha c'est pourtant simple à comprendre en plus j'ai même détailler avec des commentaires...
Et le reste du code html ne sert à rien pour cela donc aucun intérêt que je le mette c'est pour sa que je ne l'ai pas mis..

Du coup je vais essayer de mieux reformuler ma question, ce que je voudrais c'est un caroussel avec des données stocker dans un tableau js la pour le coup c'est des années

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022
12 juin 2022 à 20:15

Déjà, je vois une petite erreur

tab_date[index]--

A corriger par

tab_date[ index-- ]

anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 6 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
12 juin 2022 à 20:43

je viens de tester du coup sa me fait une boucle infini..
après je pense que ce que je veux faire c'est pas si compliqué c'est peux être juste moi qui m'exlique mal et qui m'y prend mal également

La j'essaie quelque chose comme sa :

element.childNodes[3].innerHTML = tab_date[7];
    element.childNodes[1].addEventListener('click', ()=>{
      
      let index_this = tab_date.indexOf(element.childNodes[3].innerHTML);
      element.childNodes[3].innerHTML = tab_date[index_this-1];
      
      /* element.childNodes[3].innerHTML = ; */
    })

sa marche a peu près mais sa me met undefined quand il dépasse du tableau

C'est bon j'ai réussi :

element.childNodes[3].innerHTML = tab_date[7];
    element.childNodes[1].addEventListener('click', ()=>{

      let index_this = tab_date.indexOf(element.childNodes[3].innerHTML);
      if (tab_date[index_this-1] === undefined) {
        index_this = 7;
        element.childNodes[3].innerHTML = tab_date[index_this];
      } else {
        element.childNodes[3].innerHTML = tab_date[index_this-1];
      }
      /* element.childNodes[3].innerHTML = ; */
    })
    element.childNodes[5].addEventListener('click', ()=>{
      let index_this = tab_date.indexOf(element.childNodes[3].innerHTML);
      if (tab_date[index_this+1] === undefined) {
        index_this = 0;
        element.childNodes[3].innerHTML = tab_date[index_this];
      } else {
        element.childNodes[3].innerHTML = tab_date[index_this+1];
      }
      /* element.childNodes[3].innerHTML = ; */
    })

Réponse 2 / 3

anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 6
11 juin 2022 à 21:03

du coup je suis en train de partir sur quelque chose comme sa :

element.childNodes[1].addEventListener('click', ()=>{
      for (let index = 0; index < tab_date.length; index++) {
        if (element.childNodes[3].innerHTML === tab_date[index]) {
          element.childNodes[3].innerHTML = tab_date[index]--;
        }
      }
      /* element.childNodes[3].innerHTML = ; */
    })

anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 6
12 juin 2022 à 00:08

je sais pas si c'est la bonne voie

Réponse 3 / 3

anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 6
12 juin 2022 à 19:21

j'ai beau réfléchir je trouve pas, si quelqu'un peux m'aider se serait cool

Discussions similaires

Site de confiance ou non ?

tableaux croisés dynamique

Tableau croisé dynamique avec plusieurs en-têtes identiques

Bibliothèque

Trouver le nom d'un tableau avec sa photo.