Comment changer une class ?

Résolu
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   -  
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous,

J'essaie d'adapter le "Side Navigation" de w3schools.com à ma webapplication...
Comme mes compétences en JavaScript sont très faibles, je n'arrive pas à faire
en sorte que mon "burger" qui me sert à ouvrir le menu latéral et pousse mon 'main'
devienne le burger qui me sert à fermer ce menu... La mécanique d'ouverture fonctionne
bien, la mécanique de fermeture aussi SI j'utilise ce lien :
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
mais l'idée serait de changer la class de mon burger pour que je puisse me passer du lien
pour fermer ! (D'autant que j'ai beau lire la doc, je ne comprends pas javascript:void(0))

Voici les parties de mon code concernées : 
    <div id="main">
        <body>
            <header>
                <div class="top-barre">
                    <div class="titre">CONSOLE DE GESTION</div>
                    <div class="sous-titre">Accueil</div>
                    <div class="burger" onclick="openNav()">
                        <div class="line1"></div>
                        <div class="line2"></div>
                        <div class="line3"></div>
                    </div>
                </div>
                <div id="mySidenav" class="sidenav">
                    <ul class="nav-links">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
                        <span>
                            <li class="active">Accueil</li>
                        </span>
                        <a href="clients.php">
                            <li>Clients</li>
                        </a>
                        <a href="contrats.php">
                            <li>Contrats</li>
                        </a>
                        <a href="tarifs.php">
                            <li>Tarifs</li>
                        </a>                        
                        <a href="deconnexion.php">
                            <li>Déconnexion</li>
                        </a>
                    </ul>
                </div>
            </header>
            <main>
                Lorem ipsum dolor sit amet. Qui magnam doloremque qui debitis magni
                nam enim numquam aut enim odit ex odio quis ut explicabo voluptas. Vel 
                voluptatum quibusdam a blanditiis voluptatem sed rerum facilis. Aut saepe
               deleniti ab voluptas reiciendis non facere beatae aut Quis debitis 33 mollitia
               porro ut enim sunt.
            </main>
        </body>
    </div>
    <!--  #############  S C R I P T S  J A V A  #######################-->
    <!--  ############# SCRIPT ANIMATION BURGER  #######################-->
    <script src="../js/burger.js"></script>
    <!--  ############# SCRIPT SIDE NAVIGATION W3SCHOOL ################-->
    <script type="text/javascript">
        /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
        function openNav(){
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
        }
        /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
        function closeNav(){
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
        }
    </script>



Merci d'avance pour votre aide !!!
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
bonjour
https://www.w3schools.com/howto/howto_js_toggle_class.asp
1
Réponse 2 / 2
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20
 
Merci Jordan, mais je me suis mal expliqué, ou plutôt je ne savais pas trop comment s'appelait ce que je cherchais... Après avoir farfouillé à droite et gauche j'ai trouvé comment régler mon
problème avec setAttribute : 

<script type="text/javascript">
        /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
        function openNav(){
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            document.getElementById('burger').setAttribute('onclick', 'closeNav()');
        }
        /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
        function closeNav(){
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
            document.getElementById('burger').setAttribute('onclick', 'openNav()');
        }
    </script>


D'ailleurs, à ce propos, je me demande s'il existe pas un site qui résume simplement
les différentes commandes JavaScript avec des fonctions de recherche pour trouver
ce genre de commande...
0
Narwaoudi
 
Salut,
il existe plusieurs sites qui répertorient les fonctions et méthodes JavaScript à commencer par celui où vous avez été chercher le tuto (Menu => référence => JavaScript ) qui vont les classer par groupe d'objets(une notion/concept de programmation important):

https://www.w3schools.com/jsref/default.asp

Et chez un autre acteur actif du web et du JavaScript qui fait aussi office de manuel "officiel" à cet outil toujours en section "référence" :

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference

Côté programmation événementielle( exemple détecter et utiliser une fonction lors d'un clic ) il y a une section à part(c'est un gros morceau de la programmation et un autre concept à assimiler une fois la programmation objet comprise ) et la bonne façon de faire utilise .addEventListener()
0
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20 > Narwaoudi
 
@Narwaoudi : Merci pour ces 2 sources d'infos très pratiques... Je me les enregistre en favoris !
J'ai l'impression que pour continuer à développer ma Web Application je ne vais pas avoir le choix que d'approfondir mes connaissances en JavaScript et que le PHP seul ne suffira plus... Je vais me pencher sur .addEventListener() donc !
;-)
0

Discussions similaires

Nvcontainers
Michel -
Michel -

7 réponses