Visible hidden : démarrer masqué
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:
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:
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:
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> |