Discussion :

[69Pierre]

Bonjour.
J'ai fait une calculette en js html qui fonctionne comme je veux.
J'ai fait un bouton qui appelle la fonction afficher_cacher pour que cette calculette soit masquée ou pas.
Cette calculette arrive visible, je souhaiterai qu'elle arrive masquée avec seulement le bouton permettant de l'afficher/masquer apparent.
Je ne sais pas non plus comment séparer au mieux js et html.
Merci de m'aider car je n'y arrive pas.

Endroit où la calculette doit être appelée : choixSaisie

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
<h1>Colonne de gauche</h1>
	<div>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/saisieSortie.php');">saisieSortie</a> </li><br/>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/saisieSortieBis.php');">saisieSortieBis</a> </li><br/>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/saisieParcours.php');">saisieParcours</a></li><br/>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/saisieParcoursBis.php');">saisieParcoursBis</a></li><br/>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/velos.php');">Vélos</a></li><br/>
		<li><a  id = "lien" href="#" onclick="javascript:choix_form('./Controleur/multisports.php');">Multisports</a></li><br/>
	</div>
 
<?php require_once './Outils/calculette.html';?>
<script language="javascript"> 
 
</script>

afficher_cacher

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function afficher_cacher(id)
{
if(document.getElementById(id).style.visibility=="hidden")
{
document.getElementById(id).style.visibility="visible";
}
else
{
document.getElementById(id).style.visibility="hidden";
}
return true;
}

calculette.html

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<script type="text/javascript">
 
function reset1()
{
	//this.form.reset();
	document.getElementById('valeur1').value="";
    document.getElementById('valeur2').value="";
    document.getElementById('valeur3').value="";
    document.getElementById('valeur4').value="";
    document.getElementById('valeur5').value="";
 
	document.getElementById('valeur1').style.backgroundColor='#fff';
    document.getElementById('valeur2').style.backgroundColor='#fff';
    document.getElementById('valeur3').style.backgroundColor='#fff';
    document.getElementById('valeur4').style.backgroundColor='#fff';
    document.getElementById('valeur5').style.backgroundColor='#fff';
	document.getElementById('messageerreur').innerHTML = "";
}
 
function moyenneh()
{
    var kms=document.getElementById('valeur1').value;
    var my=document.getElementById('valeur2').value;
    var hh=document.getElementById('valeur3').value;
    var mm=document.getElementById('valeur4').value;
    var ss=document.getElementById('valeur5').value;
 
    document.getElementById('valeur1').style.backgroundColor='#fff';
    document.getElementById('valeur2').style.backgroundColor='#fff';
    document.getElementById('valeur3').style.backgroundColor='#fff';
    document.getElementById('valeur4').style.backgroundColor='#fff';
    document.getElementById('valeur5').style.backgroundColor='#fff';
 
    //console.log("kms : "+kms+", my : "+my+", hh : "+hh+", mm : "+mm+" et ss : "+ss);
 
    if ((kms == "")&&(my == "")&&(hh == "")&&(mm == "")&&(ss == ""))
    {
        document.getElementById('valeur1').style.backgroundColor='#FF0000';
        document.getElementById('valeur2').style.backgroundColor='#FF0000';
        document.getElementById('valeur3').style.backgroundColor='#FF0000';
        document.getElementById('valeur4').style.backgroundColor='#FF0000';
        document.getElementById('valeur5').style.backgroundColor='#FF0000';
		msgerreur = "Aucun champ n'est pas rempli";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
 
    }
	else if ((kms !== "")&&(my !== "")&&((hh !== "")||(mm !== "")||(ss !== "")))
    {
        document.getElementById('valeur1').style.backgroundColor='#FF0000';
        document.getElementById('valeur2').style.backgroundColor='#FF0000';
        document.getElementById('valeur3').style.backgroundColor='#FF0000';
        document.getElementById('valeur4').style.backgroundColor='#FF0000';
        document.getElementById('valeur5').style.backgroundColor='#FF0000';
		msgerreur = "Tu sais déjà tout!!!!";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
 
    }
    else if ((hh == "")&&(mm == "")&&(ss == "")&&(my == ""))
    {
 
        document.getElementById('valeur2').style.backgroundColor='#FF0000';
        document.getElementById('valeur3').style.backgroundColor='#FF0000';
        document.getElementById('valeur4').style.backgroundColor='#FF0000';
        document.getElementById('valeur5').style.backgroundColor='#FF0000';
		msgerreur = "Entrez une moyenne ou une durée";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
 
    }
    else if ((kms == "")&&(my == ""))
    {
        document.getElementById('valeur1').style.backgroundColor='#FF0000';
        document.getElementById('valeur2').style.backgroundColor='#FF0000';
		msgerreur = "Entrez une distance ou une moyenne";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
    }
    else if ((kms == "")&&(hh == "")&&(mm == "")&&(ss == ""))
    {
        document.getElementById('valeur1').style.backgroundColor='#FF0000';
        document.getElementById('valeur3').style.backgroundColor='#FF0000';
        document.getElementById('valeur4').style.backgroundColor='#FF0000';
        document.getElementById('valeur5').style.backgroundColor='#FF0000';
		msgerreur = "Entrez une distance ou une durée";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
    }
    else if (kms == "")
    {
        var res = (((3600*hh)+(60*mm)+(1*ss))*my)/3600;
        console.log("Calcul 1 : "+res);
        document.getElementById('valeur1').value = res;
        document.getElementById('valeur1').style.backgroundColor='#CCFF33';
		document.getElementById('messageerreur').innerHTML = "";
    }
    else if (my == "")
    {
        console.log(kms+" X 3600 = "+(kms*3600));
        console.log((3600*hh)+" + "+(60*mm)+" + "+(ss)+" = "+((3600*hh)+(60*mm)+(ss*1)));
        res = (kms*3600)/((3600*hh)+(60*mm)+(ss*1));
		console.log("Calcul 2 : "+((kms*3600)/((3600*hh)+(60*mm)+(ss*1))));
		document.getElementById('valeur2').value = res;
        document.getElementById('valeur2').style.backgroundColor='#CCFF33';
		document.getElementById('messageerreur').innerHTML = "";
    }
    else if ((hh == "")&&(mm == "")&&(ss == ""))
    {
        var tpsS = (kms*3600)/my;
        var h = (tpsS-(tpsS%3600))/3600;
        var s0 = (tpsS%3600)%60;
        var m = (tpsS-(h*3600)-s0)/60;
        var s = Math.round(s0);
 
        console.log("Calcul 3 : "+h+" heures, "+m+" minutes, "+s+" secondes.");
		document.getElementById('valeur3').value = h;
		document.getElementById('valeur4').value = m;
		document.getElementById('valeur5').value = s;
		document.getElementById('valeur3').style.backgroundColor='#CCFF33';
		document.getElementById('valeur4').style.backgroundColor='#CCFF33';
		document.getElementById('valeur5').style.backgroundColor='#CCFF33';
		document.getElementById('messageerreur').innerHTML = "";
    }
    else { console.log("Et merde!");}
}
 
 
</script>
 
<div>
</br></br></br>
<div>
<input type="button" id="calculette" value="calculette" onclick="afficher_cacher('calc')">			
</div>
 
<div id = "calc" style="visible">
 
<fieldset >
<form name="form" method="post" action="">
<label for="valeur1">Distance : </label>
<input type="text" id="valeur1" name="valeur1" size="2">
</p> 
 
Temps :
</p> 
 
<input type="text" id="valeur3" name="valeur3" size="2">
<label for="valeur3"> heures, </label>
 
<input type="text" id="valeur4" name="valeur4" size="2">
<label for="valeur4"> minutes,</label>
 
<input type="text" id="valeur5" name="valeur5" size="2">
<label for="valeur5"> secondes.</label>
</p>
 
<label for="valeur2">Moyenne horaire : </label>
<input type="text" id="valeur2" name="valeur2" size="2">
 
</p>
 
<input type="button" value="moyenneh" onClick="moyenneh()">
<input TYPE="button" VALUE="reset" onClick="reset1();">
</form>
 
<b><div id="messageerreur"></div></b>
 
</fieldset>
</div>
</div>

[SpaceFrog]

Au moyen du style ...
soit directement dans el bouton :

Code :

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

style="visibility:hidden;"

soit par un class css

Code :

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

.masque { visibility: hidden;}

et un

Code :

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

class="masque"

au niveau du bouton...

[69Pierre]

Super.
Merci.