Raccourcir un script qui fonctionne

**bpascal91** · 14/04/2011, 13h33

Bonjour tous le monde !

Je début en javascript est je voudrai si possible raccoursir la taille de 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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
// Affichage de la page connecxion.php
function affConnecxion() {
	if ( a == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="none" ;
		document.getElementById("connecxion").style.display="block" ;
		document.getElementById("boutDeco").style.display="block";
		document.getElementById("boutCo").style.display="none";
		document.getElementById("ouvrage").style.display="none" ;
		a = false ;
		b = true ;
		c = true ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = true ;
			b = true ;
			c = true ;
		}
}
 
// Affichage de la page sujet.html
function affSujet() {
	if ( b == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="block" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="none" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
		a = true ;
		b = false ;
		c = true ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = true ;
			b = true ;
			c = true ;
		}
}
 
// Afficher la liste des ouvrages
function affOuv() {
	if ( c == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="none" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="block" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
		a = true ;
		b = true ;
		c = false ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = true ;
			b = true ;
			c = true ;
		}
}
 
// Fonction event
function addEvent(elt,evt,fct) {
	if (document.addEventListener) {
		elt.addEventListener(evt,fct,false);
		} else {
			elt.attachEvent('on'+evt,fct);
			}
}
 
// Affichage de la page sujet.html
function init(){
	document.getElementById("titre").style.display="block" ;
	document.getElementById("sujet").style.display="none" ;
	document.getElementById("connecxion").style.display="none" ;
	document.getElementById("ouvrage").style.display="none" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
	a = true ;
	b = true ;
	c = true ;
}

Voila ma question je voudrai savoir si il me serai pas plus simple de recuperai la valeur de l'id du bouton sur le quel je clic et changer juste la valeur du display en question ?

Merci pour vos réponces
bpascal91

**RomainVALERI** · 14/04/2011, 15h34

Fais-toi une petite fonction pour factoriser tous ces appels ^^

Code javascript :

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

1
2
3
4
function display(elems, etat) {
    for (var i = 0, iMax = elems.length; i < iMax; ++i)
        document.getElementById(elems[i]).style.display = etat;
}

qui te permet de remplacer par exemple ceci :

avant

Code javascript :

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

1
2
3
4
5
6
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="block" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="none" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";

après

Code javascript :

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

1
2
display(["sujet", "boutCo"], "block");
display(["titre", "connecxion", "ouvrage", "boutDeco"], "none");

**SpaceFrog** · 14/04/2011, 15h35

mauvais choix de nom de fonction ?

**RomainVALERI** · 14/04/2011, 15h38

Envoyé par SpaceFrog

mauvais choix de nom de fonction ?

Pour connecxion ?

Ca m'a frappé aussi au début mais la faute est partout ^^

Autre chose au fait si tu veux raccourcir ton code :
avant

Code javascript :

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

1
2
3
a = true;
b = true;
c = true;

après

Code javascript :

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

a = b = c = true;

^^

Et aussi :
avant

Code javascript :

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

if (a == true) ...

après

Code javascript :

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

if (a) ...

(s'il s'agit de booléens comme ici, car dans certains autres cas de figure ça peut être plus complexe)

**bpascal91** · 14/04/2011, 15h55

ok merci je vais mettre tout ca en pratique de suite ...

Je dois louper quelque chose ou pas bien le faire

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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
Code JS :
var a = b = c = true ;
// Fonction des menu
function affMenu(elems, etat) {
	for (var i = 0, iMax = elems.length; i < iMax; i++)
		document.getElementById(elems[i]).style.display = etat;
		display(["sujet", "boutonCo"], "block");
		display(["titre", "connecxion", "ouvrage", "boutonDeco"], "none");
}
 
// Affichage de la page connecxion.php
function affConnecxion() {
	if ( a == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="none" ;
		document.getElementById("connecxion").style.display="block" ;
		document.getElementById("boutDeco").style.display="block";
		document.getElementById("boutCo").style.display="none";
		document.getElementById("ouvrage").style.display="none" ;
		a = false ;
		b = c = true ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = b = c = true ;
		}
}
 
// Affichage de la page sujet.html
function affSujet() {
	if ( b == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="block" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="none" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
		a = c = true ;
		b = false ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = b = c = true ;
		}
}
 
// Afficher la liste des ouvrages
function affOuv() {
	if ( c == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="none" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="block" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
		a = b = true ;
		c = false ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = b = c = true ;
		}
}
 
// Fonction event
function addEvent(elt,evt,fct) {
	if (document.addEventListener) {
		elt.addEventListener(evt,fct,false);
		} else {
			elt.attachEvent('on'+evt,fct);
			}
}
 
// Affichage de la page sujet.html
function init(){
	document.getElementById("titre").style.display="block" ;
	document.getElementById("sujet").style.display="none" ;
	document.getElementById("connecxion").style.display="none" ;
	document.getElementById("ouvrage").style.display="none" ;
	document.getElementById("boutCo").style.display="block";
	document.getElementById("boutDeco").style.display="none";
	a = b = c = true ;
}
 
// appel de fonction init 
addEvent(window, 'load', init);

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
code html :
<div id="MV" class="MenuVert">
<p>
	<?php
		require_once('fonctionPHP.php') ;
		Bonjour('') ; 
	?>
    <br />
    <ul>
        <li><a id="btaccueil" href="#" onClick="init()">Accueil</a></li>
        <li><a id="btsujet" href="#" onClick="affMenu("sujet", "block")">Sujet</a></li>
    </ul>
    <br />
    <ul>
        <li><a id="btouvrage" href="#" onClick="affOuv()">Liste des ouvrages</a></li>
    	<li><a id="btrecherche" href="#" onClick="affOuv()">Recherche</a></li>
    </ul>
    <br />
 
</div>

J'ai tester que sur le bouton sujet est ca marche pas mes div son dans d'autre page

**Willpower** · 14/04/2011, 16h47

Code :

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

1
2
3
4
5
6
7
8
function display(elems, etat) {
    for (var i = 0, iMax = elems.length; i < iMax; ++i)
        document.getElementById(elems[i]).style.display = etat;
}
function affMenu() {
    display(["sujet", "boutonCo"], "block");
    display(["titre", "connecxion", "ouvrage", "boutonDeco"], "none");
}

Raccourcir un script qui fonctionne

JavaScript

Vue hybride

Discussions similaires

Partager

Partager