Ajouter évènement click sur ID

Question

Bonjour, 

Je souhaite ajouter un événement avec addEventListener au click sur une icône mais cela ne fonctionne pas. Je vous remercie de votre aide.

            
function sous_menu() {
                var sous_menu = document.getElementById('sous_menu');
                var btn_plus = document.getElementById('btn_plus');
                var btn_moins = document.getElementById('btn_moins');

if (sous_menu.style.display == 'none' ||  sous_menu.style.display == '') {
                            sous_menu.style.display = 'block';
                            btn_plus.style.display = 'none';             
                            btn_moins.style.display = 'block';
                        }
                else {
                            sous_menu.style.display = 'none';
                            btn_plus.style.display = 'block';
                            btn_moins.style.display = 'none';
                        }
                    }
document.getElementById("btn_plus").addEventListener('click', sous_menu);


Configuration: Windows / Chrome 46.0.2490.80

Utilisateur anonyme · Answer

Bonjour

Chez moi, ça semble marcher.
Où se trouve ton code js par rapport à ton HTML ? Car pour que ça marche, il faut que le bouton id="btn_plus" soit déjà défini au moment où ce code s'exécute. Donc se code doit être juste avant la balise </body> ou, mieux, à l'intérieur d'une fonction appelée sur le onload de ta page.

barale61 · Answer

Mon code js est dans un fichier appelé juste avant </body> et j'ai fais dans la balise body onload="sous_menu()" cela m'affiche le sous menu mais l'événement ne fonctionne pas. Et par défaut, je lui demande normalement de ne pas s'afficher.

function sous_menu() {
            sous_menu = document.getElementById('sous_menu');
            btn = document.getElementById("btn");

            if (sous_menu.style.display == 'none' ||  sous_menu.style.display == '') {
                sous_menu.style.display = 'block';
                btn.classList.remove("fa-plus");
                btn.classList.add("fa-close");
         }
            else {
                sous_menu.style.display = 'none';
                btn.classList.add("fa-plus");
                btn.classList.remove("fa-close");
            }
        }
document.getElementById("btn").addEventListener('click', sous_menu);

Utilisateur anonyme · Answer

Ce code n'a qu'un rapport lointain avec celui d'hier.
À quoi ça a servi que je me penche sur celui d'hier ?
C'est très bien que tu essayes de t'en sortir par toi même, mais comment veux-tu qu'on t'aide si tu repars sur une piste sans rapport avec ce que tu as présenté la veille ? Je ne vois pas dans ta réponse en quoi je t'ai été utile.
Si je te consacre du temps aujourd'hui, ce sera pour que tu reviennes avec un troisième code encore différent ? Ça ne m'intéresse pas.

Ajouter évènement click sur ID

3 réponses

Discussions similaires

Newsletters