Une fonction pour plusieurs utilisations

Version imprimable

Bonjour à toutes et à tous,

Simple question, qui doit paraître banale pour une grande partie d'entre vous :
Est-il possible d'utiliser une même fonction JS en utilisant différent Ids ?

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function connectel() { let enseignantForm = document.getElementById("connecten"); let eleveForm = document.getElementById("connectel"); if (eleveForm.style.display != "block") { eleveForm.style.display = "block"; if (enseignantForm.style.display == "block") { enseignantForm.style.display = "none"; } } else { eleveForm.style.display = "none"; } }
J'aimerais utiliser à nouveau cette fonction sans avoir à renommer la fonction et/ou retaper le code à chaque fois. J'aimerais juste l'appliquer à d'autres Ids dans mon code.
Est-ce possible ?
Dans ce cas, comment dois-je tourner mon code ?

Merci pour vos infos !!

salut, tu ajoutes deux paramètres à ta fonction...

Code:

1
2
3
4
5
function connectel(id1,id2) {
    let enseignantForm = document.getElementById(id1);
    let eleveForm = document.getElementById(id2);
    ........
}

29/03/2023, 19h52
CosmoKnacki

Quel est le but de cette fonction à la base? De faire apparaitre un élément et de faire disparaitre l'autre et vice et versa? Les deux éléments peuvent-ils être affichés ou non-affichés en même temps?
Normalement le nom d'une fonction doit permettre de comprendre ce qu'elle fait (le plus simplement possible en essayant d'être général) et d'autant plus que tu souhaites étendre son usage à d'autres éléments.
30/03/2023, 18h48
Latulipe2

Merci pour les réponses,

En effet, je compte changer le nom (show_hide par exemple) vu que je vais l'appliquer à différentes structures.

Mais j'aimerais savoir si je peux, dans mon HTML écrire un truc du genre

Code:

onclick="show_hide("connectel","connecten")

au lieu de retaper mes fonctions pour chaque besoin dans mon fichier js...
30/03/2023, 20h14
Archimède

Re,

Code:

onclick="show_hide('connectel','connecten')"

si vous avez des structures de balises qui se répètent, je pense que c'est plus clair d'utiliser des classes css communes comme cela par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
 
<div class="conteneur_action zone1">
 
	<input type="button" value="test 1"/>
 
	<div class="message">
		message zone 1
	</div>
 
</div>
 
<div class="conteneur_action zone2">
 
	<input type="button" value="bouton 2"/>
 
	<div class="message">
		une 2e zone
	</div>
 
</div>
 
 
<script>
"use strict";
 
document.addEventListener("DOMContentLoaded", e => {
        
        // liste de toutes les balises avec la classe "conteneur_action"
        [...document.getElementsByClassName("conteneur_action")].forEach(conteneur_action => {
                
                
                const bouton = conteneur_action.getElementsByTagName("input")[0];
                const message = conteneur_action.getElementsByClassName("message")[0];
                
                // évènement clic sur le bouton
                bouton.addEventListener("click", e => {
                        
                        let nouvelle_valeur;
                        
                        if ("none" !== message["style"]["display"]) {
                                nouvelle_valeur = "none";
                        } else {
                                nouvelle_valeur = ""; // valeur vide pour le comportement par défaut
                        }
                        
                        message["style"]["display"] = nouvelle_valeur;
                        
                });
                
                
        });
        
        
});
 
</script>
 
 
</body>
 
</html>

dans cet exemple, le code javascript est dans une balise "script" mais ce code est à mettre dans un fichier javascript séparé pour optimiser le chargement de la page.

01/04/2023, 17h40
Latulipe2

Merci pour ce retour.

Malheureusement je ne peux pas utiliser des classes css communes...

Je pensais qu'il y avait une syntaxe plus simple pour appliquer une même fonction (ici, afficher/cacher) à plusieurs endroit de mon site sans avoir à retaper les fonctions avec les différents IDs à chaque fois...
Tant pis, je vais me faire ces lignes de codes répétées alors !
02/04/2023, 08h30
javatwister

Citation:

Envoyé par Latulipe2

Malheureusement je ne peux pas utiliser des classes css communes...

Pour quelle raison étrange?
Si tu suis le code de mathieu, tu as juste à ajouter class="conteneur_action" dans les conteneurs qui t'intéressent;
02/04/2023, 10h44
Latulipe2

ah ok, j'avais pas vu ça comme ça, désolé pour mon noobisme.

Je vais devoir le décomposer un peu plus, vu que mes boutons ne se trouvent pas dans les même zones que mes container à cacher/afficher.

Mais merci pour l'info en tout cas ;)
02/04/2023, 13h25
javatwister

Bah, montre ton html, ça devrait pas être sorcier
Parenthèse: (la raison d'être d'une fonction est d'être utilisée plusieurs fois)

J'ai enlevé la partie PHP mais voici mon HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
      <div id="flexbox3">
        <button class="bouton" type="button" onclick="connecten()">
          Enseignant
        </button>
        <button class="bouton" type="button" onclick="connectel()">
          Élève
        </button>
      </div>
      <div id="connexion">
        <form action="connexion_ens.php" method="POST" id="connecten">
          <h1>Connexion</h1>
          <label><b>Mail Académique</b></label>
          <input class=input type="text" placeholder="Entrer votre mail académique" name="inscr_ens_mail" class="form-control" required="required" autocomplete="off" />
 
          <label><b>Mot de passe</b></label>
          <input class=input type="password" placeholder="Entrer votre mot de passe" class="form-control" name="inscr_ens_mdp" required="required" autocomplete="off" />
          <input type="submit" id="submit" value="VALIDER" />
        </form>
<div id="connexion">
        <form action="connexion_ele.php" method="POST" id="connectel">
          <h1>Connexion</h1>
 
          <label><b>Pseudonyme</b></label>
          <input type="text" placeholder="Entrer votre Pseudonyme" name="inscr_ele_pseudo" required="required" autocomplete="off" />
 
          <label><b>Mot de passe</b></label>
          <input type="password" placeholder="Entrer votre mot de passe" name="inscr_ele_mdp" required="required" autocomplete="off" />
          <input type="submit" id="submit" value="VALIDER" />
        </form>

et mon code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function connectel() {
    let enseignantForm = document.getElementById("connecten");
    let eleveForm = document.getElementById("connectel");
 
    if (eleveForm.style.display != "block")
    {
      eleveForm.style.display = "block";
      if (enseignantForm.style.display == "block") {
        enseignantForm.style.display = "none";
      }
    }
    else 
    {
      eleveForm.style.display = "none";
    }
  }
  function connecten() {
    let enseignantForm = document.getElementById("connecten");
    let eleveForm = document.getElementById("connectel");
 
    if (enseignantForm.style.display != "block")
    {
      enseignantForm.style.display = "block";
      if (eleveForm.style.display == "block") {
        eleveForm.style.display = "none";
      }
    }
    else 
    {
      enseignantForm.style.display = "none";
    }
  }

02/04/2023, 22h18
CosmoKnacki

Je trouve que tu t'es compliqué la vie avec tes deux boutons élève et enseignant. À ta place j'aurais intêgré un bouton type radio dans un unique formulaire pour passer de l'un à l'autre (donc en changeant le label et le placeholder du premier input), pour ensuite faire le tri dans un unique script PHP qui prend en charge les deux cas (en testant la valeur du bouton de radio).
02/04/2023, 22h28
javatwister

Je suis d'accord; un formulaire par page, c'est une excellente base pour faire des choses claires;

Petite mise à jour pour clore le sujet.
En effet, le problème venait de mon HTML.
J'ai remplacé :

Code:

openclose("quizz_window_2","quizz_window_1")

par

Code:

openclose('quizz_window_2','quizz_window_1')

et tout roule !
Pour ma fonction JS, la voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 function openclose(a, b) { let ouvrir = document.getElementById(a); let fermer = document.getElementById(b); if (ouvrir.style.display != "flex") { ouvrir.style.display = "flex"; fermer.style.display = "none"; } else { ouvrir.style.display = "none"; } }