Changer le contenu HTML au click

Bonjour à vous,
Je suis actuellement en plein développement web et je suis coincé.
En effet, je souhaiterais que au click de l'utilisateur, cette élément change :

<i class="fas fa-bars" id="sidebar_btn" onclick = clickfunction()></i>

La fonction JS correspondante :

            function clickfunction() {
                    const button = document.getElementById('sidebar_btn');
                    document.getElementById('sidebar_btn').className = 'fas fa-times';

                    button.addEventListener('click', event => {
                    document.getElementById('sidebar_btn').className = 'fas fa-bars';
                });
            }

(Disclaimer : je ne suis pas trés fort en JS, il est donc fort probable que mon code ne soit pas conforme)
Ici, l'icone change une fois puis reviens vers sa classe d'origine. Mais cette action ne se réalise qu'une fois, or je voudrais que cela se réalise à chaque fois.
En espérant avoir été assez clair.

Bonjour !

En fait, cela n'a pas l'air comme ça mais votre code Javascript fonctionne !
Mais... à chaque click, votre code ajoute un listener supplémentaire sur le bouton. Ce qui fait qu'il aura beau remettre une fois la première classe, le second listener (qui remet la classe fa-bars) sera appelé 2,3,4,5,6,.... fois, annulant le changement qui vient de se faire.
En d'autres termes, ce code empile un listener supplémentaire à chaque clic !
Le changement de la classe s'effectuant tellement vite qu'il vous donne l'impression que rien ne s'est passé.
Pour vous en rendre compte, ajoutez un petit console.log('votre texte'); au début de vos fonctions, ce petit mouchard sera un précieux allié la prochaine fois que vous chercherez à résoudre un comportement inattendu.

Pour vous dépanner, voici une solution reprenant votre code HTML sans utiliser l'attribut onCLick :

<i class="fas fa-bars" id="sidebar_btn"></i>

Et le code Javascript pour gérer l'alternance entre les deux classes :

        const sidebar_btn = document.querySelector('#sidebar_btn');
        const sidebar_classes_toggle = ['fa-bars', 'fa-times']; // <-- Classes entre lesquelles permuter (uniquement deux valeurs, pas plus, pas moins)

        // On ajoute un listener sur l'événement click de l'élément
        sidebar_btn.addEventListener('click', function(){
            var toggle = sidebar_btn.classList.toggle(sidebar_classes_toggle[0]);        
            if(toggle) {
                // La première classe n'était pas dans les classes de l'élément, elle a été ajoutée
                // ==> On retire la seconde classe
                sidebar_btn.classList.remove(sidebar_classes_toggle[1]);
            } else {
                // La première classe était dans les classes de l'élément, elle a été retirée
                // ==> On ajoute la seconde classe
                sidebar_btn.classList.add(sidebar_classes_toggle[1]);
            }            
        });

Bonne journée !
Modifié par Bouchon (18 Aug 2020 - 09:56)