Script trop long à réduire Résolu/Fermé

Question

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 : Merci d'avance :)

Defouille · Answer

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.

Andréa · Answer

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 : Nombre de CD

Nombre de DVD Nombre de K7 Nombre de CDROM

Defouille · Answer

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 ? :)

Andréa · Answer

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

Defouille · Answer

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

Andréa · Answer

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: Nombre de CD

Nombre de DVD Nombre de K7 Nombre de CDROM

Andréa · Answer

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... Saurais-tu comment faire ? Ce que j'ai fait est-il faux ? Mercii ;)

Andréa · Answer

Defouille aurais-tu une idée ?? :s

Andréa · Answer

S'il vous plaît :s c'est urgent :(

Andréa · Answer

HELP... :(

Defouille · Answer

Essaye avec des fonctions qui ont des noms différents : genre visibilite_boite et visibilite_forme

Andréa · Answer

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

Defouille · Answer

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='';

}

Andréa · Answer

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 !

Defouille · Answer

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

Andréa · Answer

Salut Defouille ! J'ai enfin trouvé la solution ;) Merci pour toute ton aide ! La résolution est : Nombre de CD

Nombre de DVD Nombre de K7 Nombre de CDROM

Andréa · Answer

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

Defouille · Answer

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

Andréa · Answer

Merci beaucoup !! C'est très claire et très gentil ;)

vic511 · Answer

Ou
function $(id){
 return document.getElementById(id);
}
$("boite1").style.display = "none";
...

Script trop long à réduire

20 réponses

Discussions similaires