Sujet Précédent Sujet Suivant

Script trop long à réduire

Résolu/Fermé
Andréa - 14 juin 2010 à 16:37
 vic511 - 10 déc. 2012 à 20:56
Bonjour,

Mon script prend trop de place dans mon code, est-ce que vous saurez comment faire pour qu'il soit moins long ?? (pour que tout soit lié et qu'il n'y ait pas toutes ces lignes)
Je sais pas si je suis très claire :s

Mon code :

<script> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
function visibilite(thingId)
{
if(document.getElementById){
if (thingId=="boite1"){
tabler1 = document.getElementById('boite1');
tabler1.style.display="";
tabler2 = document.getElementById('boite2');
tabler2.style.display="none";
tabler3 = document.getElementById('boite3');
tabler3.style.display="none";
tabler4 = document.getElementById('boite4');
tabler4.style.display="none";
}
if (thingId=="boite2"){
tabler2 = document.getElementById('boite2');
tabler2.style.display="";
tabler1 = document.getElementById('boite1');
tabler1.style.display="none";
tabler3 = document.getElementById('boite3');
tabler3.style.display="none";
tabler4 = document.getElementById('boite4');
tabler4.style.display="none";
}
if (thingId=="boite3"){
tabler3 = document.getElementById('boite3');
tabler3.style.display="";
tabler1 = document.getElementById('boite1');
tabler1.style.display="none";
tabler2 = document.getElementById('boite2');
tabler2.style.display="none";
tabler4 = document.getElementById('boite4');
tabler4.style.display="none";
}
if (thingId=="boite4"){
tabler4 = document.getElementById('boite4');
tabler4.style.display="";
tabler1 = document.getElementById('boite1');
tabler1.style.display="none";
tabler2 = document.getElementById('boite2');
tabler2.style.display="none";
tabler3 = document.getElementById('boite3');
tabler3.style.display="none";
}
}
}
</script>


Merci d'avance :)

20 réponses

Réponse 1 / 20
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
14 juin 2010 à 16:49
Bonjour,

tu pourrais essayer quelque chose du style : 

function visibilite(thingId)
{
    document.getElementById('boite1').display = 'none';
    document.getElementById('boite2').display = 'none';
    document.getElementById('boite3').display = 'none';
    document.getElementById('boite4').display = 'none';
    
    if(document.getElementById(thingId))
        document.getElementById(thingId).display='';
}



La logique : Tout caché, puis afficher que celui dont tu as besoin.
0
Réponse 2 / 20
Andréa
Modifié par Andréa le 15/06/2010 à 08:55
Merci ou c'est tout à fait ça !!

Seulement ça ne marche pas car je pense que je n'ai pas lié ça au formulaire direct :


Par exemple pour chaque bouton radio de la 1ère sélection :

<input hidden type='radio'name='variable'value='Nombre de CD'onclick="javascript:visibilite('boite1'); return false;">
<font COLOR="White">Nombre de CD</font>
<p align="center"><input hidden type='radio'name='variable'value='Nombre de DVD'onclick="javascript:visibilite('boite2'); return false;">
<font COLOR="White">Nombre de DVD</font>
<input hidden type='radio'name='variable'value='Nombre de K7'onclick="javascript:visibilite('boite3'); return false;">
<font COLOR="White">Nombre de K7</font>
<input hidden type='radio'name='variable'value='Nombre de CDROM'onclick="javascript:visibilite('boite4'); return false;">
<font COLOR="White">Nombre de CDROM</font>

<!--traitement pour les CD-->
<p align="center"><div id="boite1" style="display:none;"><input type="hidden" name="traitement1" value="traitement1"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Traitement :</font></b><br>
<input hidden type='radio'name='traitement'value='Nombre annuel de CD'onfocus="javascript:visibilite('forme1'); return false;">
<font COLOR="White">Nombre annuel de CD</font>
<input hidden type='radio'name='traitement'value='Nombre mensuel de CD'onfocus="javascript:visibilite('forme2'); return false;">
<font COLOR="White">Nombre mensuel de CD</font>

Et pareil pour les DVD, les K7 et CDROM. Mais quand je choisis l'un des 4 ça ne m'affiche rien :s
0
Réponse 3 / 20
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
15 juin 2010 à 09:17
Il faut que tu fasses plusieurs fonctions, ou alors une avec des attributs un peu plus complexe :p

Tu peux me montrer ton code, s'il te plait ? :)
0
Réponse 4 / 20
Andréa
15 juin 2010 à 09:42
Voici mon code initiale qui fonctionne très bien mais qui est bien trop long et je suis sur que pour le script je peux réduire ça au lieu de faire la fonction pour chaque boite, j'aimerais tout rassembler ^^ :

<html>
<head>

<script> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
function visibilite(thingId)
{
if(document.getElementById){
if (thingId=="boite1"){
tabler1 = document.getElementById('boite1');
tabler1.style.display="";
tabler2 = document.getElementById('boite2');
tabler2.style.display="none";
tabler3 = document.getElementById('boite3');
tabler3.style.display="none";
tabler4 = document.getElementById('boite4');
tabler4.style.display="none";
}
if (thingId=="boite2"){
tabler2 = document.getElementById('boite2');
tabler2.style.display="";
tabler1 = document.getElementById('boite1');
tabler1.style.display="none";
tabler3 = document.getElementById('boite3');
tabler3.style.display="none";
tabler4 = document.getElementById('boite4');
tabler4.style.display="none";
}
if (thingId=="boite3"){
tabler3 = document.getElementById('boite3');
tabler3.style.display="";
tabler1 = document.getElementById('boite1');
tabler1.style.display="none";
tabler2 = document.getElementById('boite2');
tabler2.style.display="none";
tabler4 = document.getElementById('boite4');
tabler4.style.display="none";
}
if (thingId=="boite4"){
tabler4 = document.getElementById('boite4');
tabler4.style.display="";
tabler1 = document.getElementById('boite1');
tabler1.style.display="none";
tabler2 = document.getElementById('boite2');
tabler2.style.display="none";
tabler3 = document.getElementById('boite3');
tabler3.style.display="none";
}
}
}
</script>

</head>
<body>
<form action="Transition.php" target="_blank" method="POST">

<input hidden type='radio'name='variable'value='Nombre de CD'onclick="javascript:visibilite('boite1'); return false;">
<font COLOR="White">Nombre de CD</font>
<p align="center"><input hidden type='radio'name='variable'value='Nombre de DVD'onclick="javascript:visibilite('boite2'); return false;">
<font COLOR="White">Nombre de DVD</font>
<input hidden type='radio'name='variable'value='Nombre de K7'onclick="javascript:visibilite('boite3'); return false;">
<font COLOR="White">Nombre de K7</font>
<input hidden type='radio'name='variable'value='Nombre de CDROM'onclick="javascript:visibilite('boite4'); return false;">
<font COLOR="White">Nombre de CDROM</font>

<!--traitement pour les CD-->
<p align="center"><div id="boite1" style="display:none;"><input type="hidden" name="traitement1" value="traitement1"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Traitement :</font></b><br>
<input hidden type='radio'name='traitement'value='Nombre annuel de CD'onfocus="javascript:visibilite('forme1'); return false;">
<font COLOR="White">Nombre annuel de CD</font>
<input hidden type='radio'name='traitement'value='Nombre mensuel de CD'onfocus="javascript:visibilite('forme2'); return false;">
<font COLOR="White">Nombre mensuel de CD</font>

<!--traitement pour les DVD-->
<p align="center"><div id="boite2" style="display:none;"><input type="hidden" name="traitement1" value="traitement1"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Traitement :</font></b><br>
<input hidden type='radio'name='traitement'value='Nombre annuel de DVD'onfocus="javascript:visibilite('forme1'); return false;">
<font COLOR="White">Nombre annuel de DVD</font>
<input hidden type='radio'name='traitement'value='Nombre mensuel de DVD'onfocus="javascript:visibilite('forme2'); return false;">
<font COLOR="White">Nombre mensuel de DVD</font>

... et les autres traitements : K7, CDROM ...

<div align='right' ><input type='submit' name='submit' value='Valider'title="Résultat"/></div>

</body>
</html>



C'est bien ce que tu voulais ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 20
Andréa
15 juin 2010 à 10:58
Ni quel c'est ça =D merciiii :))

Juste un dernier truc lol
Maintenant qu'avec les boites c'est bon, il me reste les formes de date :s
Si je clique sur Nombre de CD et après sur Nombre mensuel, les boutons radio du traitement (nombre annuel, mensuel) s'enlève et la forme de date s'affiche alors que je voudrais que le traitement reste et que la forme de date s'affiche en dessous...

Faut-il refaire un script ou simplement les rajouter ?
Genre :
document.getElementById('forme1').style.display = 'none';
document.getElementById('forme2').style.display = 'none';

Le code:

<script>
function visibilite(thingId)
{
document.getElementById('boite1').style.display = 'none';
document.getElementById('boite2').style.display = 'none';
document.getElementById('boite3').style.display = 'none';
document.getElementById('boite4').style.display = 'none';

if(document.getElementById(thingId))
document.getElementById(thingId).style.display='';
}
</script>


<input hidden type='radio'name='variable'value='Nombre de CD'onclick="javascript:visibilite('boite1'); return false;">
<font COLOR="White">Nombre de CD</font>
<p align="center"><input hidden type='radio'name='variable'value='Nombre de DVD'onclick="javascript:visibilite('boite2'); return false;">
<font COLOR="White">Nombre de DVD</font>
<input hidden type='radio'name='variable'value='Nombre de K7'onclick="javascript:visibilite('boite3'); return false;">
<font COLOR="White">Nombre de K7</font>
<input hidden type='radio'name='variable'value='Nombre de CDROM'onclick="javascript:visibilite('boite4'); return false;">
<font COLOR="White">Nombre de CDROM</font>

<!--traitement pour les CD-->
<p align="center"><div id="boite1" style="display:none;"><input type="hidden" name="traitement1" value="traitement1"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Traitement :</font></b><br>
<input hidden type='radio'name='traitement'value='Nombre annuel de CD'onfocus="javascript:visibilite('forme1'); return false;">
<font COLOR="White">Nombre annuel de CD</font>
<input hidden type='radio'name='traitement'value='Nombre mensuel de CD'onfocus="javascript:visibilite('forme2'); return false;">
<font COLOR="White">Nombre mensuel de CD</font>

... autres traitements (DVD,K7 et CDROM) ...

<!--format date1-->
<div id="forme1" style="display:none;"><input type="hidden" name="date1" value="date1"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Date :</font></b><br><br>
<p align="left">
De <input type="hidden" name="debut" value=""><input type='text' name='debut' size='1' maxlength='4' /><font COLOR="White"> à </font>
<input type="hidden" name="fin" value=""><input type='text' name='fin' size='1' maxlength='4' /></div>

<!--format date2-->
<div id="forme2" style="display:none;"><input type="hidden" name="date2" value="date2"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Date :</font></b><br><br>
<p align="left">En <input type="hidden" name="debut1" value=""><input type='text' name='debut1' size='1' maxlength='4' /></div>
0
Réponse 6 / 20
Andréa
Modifié par Andréa le 15/06/2010 à 11:38
C'est bon maintenant le traitement et la date s'affichent seulement j'ai un dernier petit problème :s
Si je sélectionne les CD et que finalement je sélectionne DVD, les 2 traitements s'affichent, c'est-à-dire que le traitement CD (annuel,mensuel) s'affiche et lors de la sélection DVD son traitement s'ajoute en dessous de celui des CD alors que je voudrais que le traitement des CD s'efface et qu'il n'y ait que celui des DVD qui soit visible...

<script> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
function visibilite(thingId1)
{
document.getElementById('boite1').style.display = 'none';
document.getElementById('boite2').style.display = 'none';
document.getElementById('boite3').style.display = 'none';
document.getElementById('boite4').style.display = 'none';

if(document.getElementById(thingId1))
document.getElementById(thingId1).style.display='';
}

function visibilite(thingId2)
{
document.getElementById('forme1').style.display = 'none';
document.getElementById('forme2').style.display = 'none';

if(document.getElementById(thingId2))
document.getElementById(thingId2).style.display='';
}
</script>

Saurais-tu comment faire ? Ce que j'ai fait est-il faux ?

Mercii ;)
0
Andréa
16 juin 2010 à 08:25
Par contre pour les dates ça marche très bien, elles changent lorsqu'on clique sur une autre, l'ancienne s'efface et l'actuelle apparaît
0
Réponse 7 / 20
Andréa
15 juin 2010 à 15:31
Defouille aurais-tu une idée ?? :s
0
Réponse 8 / 20
Andréa
16 juin 2010 à 10:25
S'il vous plaît :s c'est urgent :(
0
Réponse 9 / 20
Andréa
16 juin 2010 à 14:43
HELP... :(
0
Réponse 10 / 20
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
16 juin 2010 à 15:12
Essaye avec des fonctions qui ont des noms différents : genre visibilite_boite et visibilite_forme
0
Réponse 11 / 20
Andréa
16 juin 2010 à 15:49
Merci beaucoup d'avoir répondu Defouille :)

J'ai testé avec ce que tu m'as dit mais si je change la fonction ça ne marche plus du tout quand je sélectionne DVD les traitements ne s'affichent pas.
J'ai même essayé en changeant function visibilite(thingId1) et l'autre function visibilite(thingId2) et ça fait ce que je te disais, les traitement s'accumulent mais pour les dates aucun problème, elles changent !

Je ne vois pas du tout quoi faire...
0
Réponse 12 / 20
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
16 juin 2010 à 16:43
Je comprend pas bien ton probleme...
essaye avec ca : 

function visibilite(thingId1)
{
    document.getElementById('boite1').style.display = 'none';
    document.getElementById('boite2').style.display = 'none';
    document.getElementById('boite3').style.display = 'none';
    document.getElementById('boite4').style.display = 'none';

    document.getElementById('forme1').style.display = 'none';
    document.getElementById('forme2').style.display = 'none';

    if(document.getElementById(thingId1))
        document.getElementById(thingId1).style.display='';

}

0
Réponse 13 / 20
Andréa
Modifié par Andréa le 16/06/2010 à 17:00
Oui j'ai déjà essayé avec ça !

Alors attends je t'explique concrètement :

Variables : CD, DVD, K7, CDROM

Traitements : - CD mensuel, CD annuel (boite1)
- DVD mensuel, DVD annuel (boite2)
- K7 mensuel, K7 annuel (boite3)
-CDROM mensuel, CDROM annuel (boite4)

Date : - De ... à ... (entre 2 années donc traitement annuel) (forme1)
- En ... (une année donc traitement mensuel) (forme2)

Quand j'arrive sur ma page, il n'y a que les variables qui sont affichées. Si je clique sur "DVD", le traitement qui va s'afficher en dessous des variables c'est "DVD mensuel", "DVD annuel". Et ensuite, si je clique sur "DVD mensuel", la date qui va s'afficher en dessous des variables et des traitements c'est "En...".

Mon problème là, avec ce que tu viens de me donner en dernier, c'est que lorsque je clique sur DVD, les traitements mensuel et annuel s'affichent parfaitement mais quand je clique sur le traitement mensuel, la date "En..." s'affiche mais le traitement s'efface alors que je voudrais qu'il reste afficher au dessous des variables mais au dessus de la date.

J'espère que c'est un peu plus claire :s , si jamais tu ne comprends toujours pas dis le moi ;)

Merci encore !
0
Réponse 14 / 20
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
17 juin 2010 à 08:23
Avec : 

function visibilite1(thingId1) 
{ 
    document.getElementById('boite1').style.display = 'none'; 
    document.getElementById('boite2').style.display = 'none'; 
    document.getElementById('boite3').style.display = 'none'; 
    document.getElementById('boite4').style.display = 'none'; 

    if(document.getElementById(thingId1)) 
        document.getElementById(thingId1).style.display=''; 
} 

function visibilite2(thingId2) 
{ 
    document.getElementById('forme1').style.display = 'none'; 
    document.getElementById('forme2').style.display = 'none'; 

    if(document.getElementById(thingId2)) 
        document.getElementById(thingId2).style.display=''; 
}


Ca devrait marcher, mais tu dois changer les fonctions qu'appelle le onclick de tes radio boutons

un exemple pour les traitements un et pour les dates : 

<input hidden type='radio'name='variable'value='Nombre de CDROM'onclick="javascript:visibilite1('boite4'); return false;"> 

 
<input hidden type='radio'name='traitement'value='Nombre annuel de CD'onfocus="javascript:visibilite2('forme1'); return false;">


0
Réponse 15 / 20
Andréa
17 juin 2010 à 08:52
Salut Defouille !

J'ai enfin trouvé la solution ;) Merci pour toute ton aide !

La résolution est :

<script> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
function visibilite_boite(thingId)
{
document.getElementById('boite1').style.display = 'none';
document.getElementById('boite2').style.display = 'none';
document.getElementById('boite3').style.display = 'none';
document.getElementById('boite4').style.display = 'none';

if(document.getElementById(thingId))
document.getElementById(thingId).style.display='';
}

function visibilite_forme(thingId)
{
document.getElementById('forme1').style.display = 'none';
document.getElementById('forme2').style.display = 'none';

if(document.getElementById(thingId))
document.getElementById(thingId).style.display='';
}
</script>

<input hidden type='radio'name='variable'value='Nombre de CD'onclick="javascript:visibilite_boite('boite1'); return false;">
<font COLOR="White">Nombre de CD</font>
<p align="center"><input hidden type='radio'name='variable'value='Nombre de DVD'onclick="javascript:visibilite_boite('boite2'); return false;">
<font COLOR="White">Nombre de DVD</font>
<input hidden type='radio'name='variable'value='Nombre de K7'onclick="javascript:visibilite_boite('boite3'); return false;">
<font COLOR="White">Nombre de K7</font>
<input hidden type='radio'name='variable'value='Nombre de CDROM'onclick="javascript:visibilite_boite('boite4'); return false;">
<font COLOR="White">Nombre de CDROM</font>

<!--traitement pour les CD-->
<p align="center"><div id="boite1" style="display:none;"><input type="hidden" name="traitement1" value="traitement1"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Traitement :</font></b><br>
<input hidden type='radio'name='traitement'value='Nombre annuel de CD'onfocus="javascript:visibilite_forme('forme1'); return false;">
<font COLOR="White">Nombre annuel de CD</font>
<input hidden type='radio'name='traitement'value='Nombre mensuel de CD'onfocus="javascript:visibilite_forme('forme2'); return false;">
<font COLOR="White">Nombre mensuel de CD</font>

... autres traitements (DVD,K7 et CDROM) ...

<!--format date1-->
<div id="forme1" style="display:none;"><input type="hidden" name="date1" value="date1"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Date :</font></b><br><br>
<p align="left">
De <input type="hidden" name="debut" value=""><input type='text' name='debut' size='1' maxlength='4' /><font COLOR="White"> à </font>
<input type="hidden" name="fin" value=""><input type='text' name='fin' size='1' maxlength='4' /></div>

<!--format date2-->
<div id="forme2" style="display:none;"><input type="hidden" name="date2" value="date2"><br><br><br><br><b>
<font SIZE="4" COLOR="Orange">Date :</font></b><br><br>
<p align="left">En <input type="hidden" name="debut1" value=""><input type='text' name='debut1' size='1' maxlength='4' /></div>
0
Réponse 16 / 20
Andréa
25 juin 2010 à 11:50
Bonjour Defouille !!

Je voudrais savoir si tu pouvais m'expliquer le script, je ne comprends pas trop ce que veut dire par exemple "document.getElementById('boite1').style.display" et

comment ce script permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection ?

Merci beaucoup ;)
0
Réponse 17 / 20
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
25 juin 2010 à 11:58
document.getElementById('xxx'), permet de récupérer un objet javascript à partir du document HTML.
Cet objet a des attributs que tu peux modifier.

Si tu veux modifier l'apparence de ton objet tu dois modifier les sous-attributs de l'attribut "style". A partir de la tu peux accéder a tout ce qui est élément CSS.

Si tu préfères tu peux utiliser la méthode "setAttribute" du genre : 
document.getElementById('xxx').setAttribute('display', 'block') ;


de cette façon (peut etre plus simple pour un débutant) tu peux modifier tout les attributs de tes objets html.

J'espère que j'ai été assez clair ><.
0
Réponse 18 / 20
Andréa
25 juin 2010 à 14:20
Merci beaucoup !! C'est très claire et très gentil ;)
0
Réponse 19 / 20
vic511
10 déc. 2012 à 20:56
Ou 
function $(id){
 return document.getElementById(id);
}
$("boite1").style.display = "none";
...
0
Réponse 20 / 20
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
15 juin 2010 à 10:08
Autant pour moi !
je me suis trompé dans le code que je t'ai donné... ('-.-)

function visibilite(thingId)
{
document.getElementById('boite1').style.display = 'none';
document.getElementById('boite2').style.display = 'none';
document.getElementById('boite3').style.display = 'none';
document.getElementById('boite4').style.display = 'none';

if(document.getElementById(thingId))
document.getElementById(thingId).style.display='';
}

ca devrait etre mieux :p
-1

Discussions similaires

3 bip long 2 bip courts
bgielel -
Bgiebgielel -

14 réponses
recherche script "les visiteurs"
stoukboy -
brucine -

22 réponses
PC 2 bips longs suivis de 2 bips courts au demarrage
amiseck -
billmaxime -

26 réponses