Bonjour, je suis sur un projet de chat et je suis en train de faire la partie où on choisi la conversation. Donc je met un eventListener avec une boucle que si on clique dessus il se met en actif et il supprime l'ancien actif mais le problème est que je n'arrive pas à mettre le nouveau actif.

Le code sera plus parlant:

html : donc la j'ai le premier element qui est actif par defaut

<div class="chatList">
            <input type="text" placeholder="Search Something ..." class="searchBar">
            <div class="elem active">
                <img class="iconChat" src="resources/logo x.0.png">
                <div class="Text">
                    <p class="chatName">Mama</p>
                    <p class="preview">How are you honey ?</p>
                </div>
            </div>

            <div class="elem">
                <img class="iconChat" src="resources/logo x.0.png">
                <div class="Text">
                    <p class="chatName">Papa</p>
                    <p class="preview">What are you doing ? </p>
                </div>
            </div>

            <div class="elem">
                <img class="iconChat" src="resources/logo x.0.png">
                <div class="Text">
                    <p class="chatName">Papa</p>
                    <p class="preview">What are you doing ? </p>
                </div>
            </div>


            
        </div>

Js : et la la boucle for. Mais le problème est que à la dernière etape dans la console il me retourne que selectedTalk[num] n'est pas défini.

selectedTalk = document.querySelectorAll(".elem")
        for (var num = 0; num < selectedTalk.length; num++){
            selectedTalk[num].addEventListener("click", function(){
                document.querySelector(".active").className = "elem"
                selectedTalk[num].className += "active"
            })
        }

Auriez vous une idée de comment je pourrais faire ?

Merci

-
Edité par MaxMlr 26 septembre 2021 à 10:01:22

Bonjour,

J'aurais plutôt utilisé la méthode classList qui possède deux méthodes intéressantes : add('class') et remove('class') :

https://jsfiddle.net/9es5j73r/ 

https://developer.mozilla.org/fr/docs/Web/API/Element/classList 

-
Edité par piero5673 26 septembre 2021 à 10:47:54

[edit] Aaargh ! piero5673 a dégainé plus vite que moi ! [/edit]

Alors, il y a un moyen assez simple.

Dans la callback de ton eventListener ( ligne 4 et 5 ), déjà il manque les ";" à la fin de tes instructions. Fais bien attention à ça, des fois ça provoque des erreurs, et bien souvent le message d'erreur envoyé ne pointe pas du tout vers la bonne ligne. J'ai déjà hurlé, pleuré, et sérieusement pensé à ma pendre pendant une bonne semaine à cause d'un oubli de point-virgule.

Je me met sur le coup, mais en attendant voici des pistes :

- dans la callback, commence par supprimer "active" de la classList. ( un élément HTML possède une propriété classList qui te renvoie un array de toutes les classes )
- essaye d'utiliser l'event.target, à savoir l'élément qui a déclenché l'évènement. Il suffira juste d'ajouter "active" à sa classList.

element.classList - Référence Web API | MDN

-
Edité par LucasWerquin 26 septembre 2021 à 10:59:12

piero5673 a écrit:

Bonjour,

J'aurais plutôt utilisé la méthode classList qui possède deux méthodes intéressantes : add('class') et remove('class') :

https://jsfiddle.net/9es5j73r/ 

https://developer.mozilla.org/fr/docs/Web/API/Element/classList 

-
Edité par piero5673 il y a 14 minutes

Merci beaucoup c'est super sympa 🤩

LucasWerquin a écrit:

[edit] Aaargh ! piero5673 a dégainé plus vite que moi ! [/edit]

Alors, il y a un moyen assez simple.

Dans la callback de ton eventListener ( ligne 4 et 5 ), déjà il manque les ";" à la fin de tes instructions. Fais bien attention à ça, des fois ça provoque des erreurs, et bien souvent le message d'erreur envoyé ne pointe pas du tout vers la bonne ligne. J'ai déjà hurlé, pleuré, et sérieusement pensé à ma pendre pendant une bonne semaine à cause d'un oubli de point-virgule.

Je me met sur le coup, mais en attendant voici des pistes :

- dans la callback, commence par supprimer "active" de la classList. ( un élément HTML possède une propriété classList qui te renvoie un array de toutes les classes )
- essaye d'utiliser l'event.target, à savoir l'élément qui a déclenché l'évènement. Il suffira juste d'ajouter "active" à sa classList.

element.classList - Référence Web API | MDN

-
Edité par LucasWerquin il y a 3 minutes

Allons bon, moi j'ai un petit souci de mon côté. Il se trouve que l'eventListener est ajouté aussi aux enfants des div .elem. Ce qui fait que l'event.target dans ma callback sera l'enfant sur lequel j'ai cliqué, et non la div qui le contient :/

Comportement que je ne connaissais pas et sur lequel je vais devoir me documenter un peu...