Une fonction pour plusieurs utilisations

**Latulipe2** · 29/03/2023, 18h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!

**Archimède** · 29/03/2023, 19h36

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

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**CosmoKnacki** · 29/03/2023, 19h52

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.

**Latulipe2** · 30/03/2023, 18h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

au lieu de retaper mes fonctions pour chaque besoin dans mon fichier js...

**Archimède** · 30/03/2023, 20h14

Re,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mathieu** · 30/03/2023, 20h26

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Latulipe2** · 01/04/2023, 17h40

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 !

**javatwister** · 02/04/2023, 08h30

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;

**Latulipe2** · 02/04/2023, 10h44

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

**javatwister** · 02/04/2023, 13h25

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)

**Latulipe2** · 02/04/2023, 20h24

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
    }
  }

**CosmoKnacki** · 02/04/2023, 22h18

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).

**javatwister** · 02/04/2023, 22h28

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

**Latulipe2** · 23/04/2023, 18h59

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

openclose("quizz_window_2","quizz_window_1")

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

openclose('quizz_window_2','quizz_window_1')

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
  }
}

Une fonction pour plusieurs utilisations

JavaScript

Discussions similaires

Partager

Partager