Masquer plusieurs DIV et en afficher d'autres en même temps

Etienne69
Javascript

Bonsoir à tous,

Avec de très faibles connaissances en Javascript, j'ai écris un bout de code (QUI FONCTIONNE !)
qui me permet en appuyant sur un button d'afficher une div dans un formulaire et d'en cacher
2 autres, même chose quand je clique sur le 2° button, et le 3° également.
Je suis sûr qu'il doit y avoir un moyen plus PRO.pre pour remplacer ceci, mais je ne sais pas
par quel bout le prendre : 

<div class="separation">
    <button type="button" onclick = "div1()">Contacts</button>
    <button type="button" onclick = "div2()">Notes internes</button> 
    <button type="button" onclick = "div3()");">Comptabilité</button>                           
</div>

.../...

<div id="div_contact">
    <input type="texte" placeholder="Nom" class="spyme" name="contact_nom" /><br />
    <input type="texte" placeholder="Tél." class="spyme" name="contact_tel" /><br />
    <input type="texte" placeholder="Courriel" class="spyme" name="contact_courriel" />                         
</div><!--div_contact-->

<div id="div_note">
    <textarea name="note" placeholder="Enregistrez ici toutes informations utiles..." class="spyme"></textarea>
</div><!--div_note-->

<div id="div_comptabilite">
    <input type="texte" class="spyme" placeholder="Compte" name="num_compte" />
    <input type="texte" class="spyme" placeholder="Intitulé" name="nom_compte" />
</div><!--div_comptabilite-->
.../...

<script>
/* DÉCLARATION DES VARIABLES */
var div_contact = document.getElementById('div_contact');
var div_note = document.getElementById('div_note');
var div_comptabilite = document.getElementById('div_comptabilite');

/* AFFICHAGE / MASQUAGE DES 3 PARTIES FOOTER */
function div1(){    
    div_contact.style.display = "inline-block";
    div_note.style.display = "none";    
    div_comptabilite.style.display = "none";    
}

function div2(){    
    div_contact.style.display = "none";
    div_note.style.display = "inline-block";    
    div_comptabilite.style.display = "none";    
}

function div3(){    
    div_contact.style.display = "none";
    div_note.style.display = "none";    
    div_comptabilite.style.display = "inline-block";    
}

</script>

Merci d'avance pour vos lumières et explications surtout !

3 réponses

PhiSyX

Yop!

Créer une fonction qui prend en paramètre une chaîne de caractère.
Par ex:

...

<button type="button" onclick="showDiv('contact')">Contacts</button>
<button type="button" onclick="showDiv('note')">Notes internes</button>
<button type="button" onclick="showDiv('comptabilite')">Comptabilité</button>

...

<div id="div_contact">
  ...
</div>

...

<script>function showDiv(name) {}</script>

Dans cette fonction tu récupères toutes les divs ayant un ID commencant par div_, tu peux le faire avec avec document.querySelectorAll('div[id^="div_"]') qui te retourne un tableau contenant toutes les DIVs qui correspondent au selecteur.
Tu boucles ce tableau, puis à l'intérieur de cette boucle tu crées une condition: SI l'ID de l'élément CONTIENT le nom passé en paramètre ALORS j'applique le style display inline-block sur l'élément SINON j'applique le style display none.

Voilà en gros.. ^^

Etienne69
Auteur

Merci PhiSyX, mais mon niveau en Javascript est proche de 0 !
J'ai bien essayé ça, mais ça ne fonctionne pas, le nom de ma variable est undefined ! :-(

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>GESCOM</title>
    </head>
    <body>
        <div style="display:block;">        
            <button type="button" onclick="showDiv('contact')">Contacts</button>
            <button type="button" onclick="showDiv('note')">Notes internes</button>
            <button type="button" onclick="showDiv('comptabilite')">Comptabilité</button>
        </div>

        <div id="div_contact" style="display:block;">
            <input type="texte" placeholder="Nom" class="spyme" name="contact_nom" /><br />
            <input type="texte" placeholder="Tél." class="spyme" name="contact_tel" /><br />
            <input type="texte" placeholder="Courriel" class="spyme" name="contact_courriel" />                           
        </div><!--div_contact-->
        <div id="div_note" style="display:none;">
            <textarea name="note" placeholder="Enregistrez ici toutes informations utiles..." class="spyme"></textarea>
        </div><!--div_note-->
        <div id="div_comptabilite" style="display:none;">
            <input type="texte" class="spyme" placeholder="Compte" name="num_compte" />
            <input type="texte" class="spyme" placeholder="Intitulé" name="nom_compte" />
        </div><!--div_comptabilite-->
    </body>
</html>

<script>
function showDiv(name) {  
    var divfooter = document.querySelectorAll('div[id^="div_"]');
    /*alert(divfooter.name);*/
    /*alert(name);*/
    for(var i=0; i<divfooter.length; i++) { 
        if(divfooter[i].name ==name){
            divfooter[i].style.display = "block";  
        }
        else {
            divfooter[i].style.display = "none"; 
        }
    }   
}
</script>
Etienne69
Auteur

Whouaw !
Tes 3 lignes de code remplacent mes 12 lignes !
Effectivement, ça fait plus PROpre !

J'ai opté pour la deuxième solution bien que plus complexe à lire (notamment le [ ]. avant le
forEach).... La première solution quant à elle intègre un if dans une boucle, je me demande si
c'est bien bon finalement en terme de perf ! (pour 3 div c'est sans incidence je suppose mais
cela me prouve qu'en prenant un peu de recul, il existe une solution plus simple, encore faut il
maitriser le language !)

En tous cas merci à vous deux pour ces cours en ligne !