Fonction javascript afficher/cacher [Résolu]

Signaler
Messages postés
42
Date d'inscription
mardi 21 février 2006
Statut
Membre
Dernière intervention
5 juillet 2006
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-

14 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,
pas sûr d'avoir compris ce qu'il faut faire...
s'il s'agit de montrer Colo1 à 8 en fonction du choix
dans le select, un ch'tit exemple :
( tous les tests semblent inutiles ... )

<html>
<head>
<title>test</title>
<script language="JavaScript">
var prec=false;
function afficherAutre(sel)
{
if ( prec )
{
prec.style.display="none";
}
prec=document.getElementById(sel[sel.selectedIndex].text);
prec.style.display="block";
document.getElementById("valider").style.display="block";
}
</script>
</head>

<form name="form1" method="post" action="">
Choisissez une colonie :
<select name="liste" onChange="afficherAutre(this)">
<option value=0>Choisissez</option>
<option >colo1</option>
<option >colo2</option>
<option >colo3</option>
<option >colo4</option>
<option >colo5</option>
<option >colo6</option>
<option >colo7</option>
<option >colo8</option>
</select>



Colo1 - Nom : Coordonn&eacute;es :,
Colo2 - Nom : Coordonn&eacute;es :,
Colo3 - Nom : Coordonn&eacute;es :,
Colo4 - Nom : Coordonn&eacute;es :,
Colo5 - Nom : Coordonn&eacute;es :,
Colo6 - Nom : Coordonn&eacute;es :,
Colo7 - Nom : Coordonn&eacute;es :,
Colo8 - Nom : Coordonn&eacute;es :,

</form>

</html>

mais je doute...
ne serait-ce pas ajouter des zones où l'on peut saisir
des noms, au fur et à mesure, en dynamique ?
ce serait bien de formuler ce qu'il faut faire.

Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO>
</S< body>
Messages postés
42
Date d'inscription
mardi 21 février 2006
Statut
Membre
Dernière intervention
5 juillet 2006

(excusez moi je ne sais pas pourquoi il n'a rien écris...)

Salut, Je voudrais votre aide sur ce script car il ne fonctionne pas et malheureusement je ne suis même pas débutant en javascript je m'y suis improvisé ^^ ...

<html>
<head>
<title>test</title>
<script language="JavaScript">
function afficherAutre() {
var a = document.getElementById("colo1");
var b = document.getElementById("colo2");
var c = document.getElementById("colo3");
var d = document.getElementById("colo4");
var e = document.getElementById("colo5");
var f = document.getElementById("colo6");
var g = document.getElementById("colo7");
var h = document.getElementById("colo8");
var i = document.getElementById("valider");

if (document.form1.liste.value == 1)
{
if (a.style.display == "none")

a.style.display = "block";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";


}
if (document.form1.liste.value == 2)
{
if (b.style.display == "none")

a.style.display = "none";
b.style.display = "block";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";


}
if (document.form1.liste.value == 3)
{
if (c.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "block";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";


}
if (document.form1.liste.value == 4)
{
if (d.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "block";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";


}
if (document.form1.liste.value == 5)
{
if (e.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "block";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";


}
if (document.form1.liste.value == 6)
{
if (f.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "block";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";


}
if (document.form1.liste.value == 7)
{
if (g.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "block";
h.style.display = "none";
i.style.display = "none";


}
if (document.form1.liste.value == 8)
{
if (h.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "block";
i.style.display = "none";


}
if (document.form1.liste.value == 9)
{
if (i.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "block";


}
else
{
a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";
}
</script>
</head>


<form name="form1" method="post" action="">
Choisissez une colonie :
<select name="liste" onChange="afficherAutre()">
<option value=0>Choisissez</option>

<option value=1 >colo1</option>

<option value=2 >colo2</option>

<option value=3 >colo3</option>

<option value=4 >colo4</option>

<option value=5 >colo5</option>

<option value=6 >colo6</option>

<option value=7 >colo7</option>

<option value=8 >colo8</option>

<option value=9 >Valider</option>
</select>



Colo1 - Nom : Coordonnées :,

Colo2 - Nom : Coordonnées :,

Colo3 - Nom : Coordonnées :,

Colo4 - Nom : Coordonnées :,

Colo5 - Nom : Coordonnées :,

Colo6 - Nom : Coordonnées :,

Colo7 - Nom : Coordonnées :,

Colo8 - Nom : Coordonnées :,


</form>

</html>
Merci à tous

------------------------------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.
Messages postés
42
Date d'inscription
mardi 21 février 2006
Statut
Membre
Dernière intervention
5 juillet 2006

Oui c'était bien ça merci beaucoup ^^
la prochaine fois j'éssaierais d'être plus précis ...
--------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...

Il manque déjà } en fin de script mais bon...

la partie suivante...

if (document.form1.liste.value == 9){
....
}
else{
a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";
}
annule tout si le choix n'est pas 9 donc pas terrible....

Ca c'était pour comprendre le piège des if à répétition pour un code plus propre voir ci dessus le code de l'excellent BULTEZ...

;0)
Messages postés
42
Date d'inscription
mardi 21 février 2006
Statut
Membre
Dernière intervention
5 juillet 2006

j'vais faire mon chi*ur ^^
mais en faites je voulais que ça m'affiche plusieurs blocks en même temps comme cela :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Ennemis</title>


<script language="JavaScript">
var prec=false;
function afficherAutre(sel)
{
if ( prec )
{
prec.style.display="none";
}
prec=document.getElementById(sel[sel.selectedIndex].text);
prec.style.display="block";
document.getElementById("valider").style.display="block";
}
</script>


</head>
<form method="post">
Pseudo / alliance,
,
,
Univers : ,

----

Plan&egrave;tes.<select name="liste" onChange="afficherAutre(this)">
<option value=0>Choisissez</option>

<option>colo1</option>
<option>colo2</option>
<option>colo3</option>
<option>colo4</option>
<option>colo5</option>
<option>colo6</option>
<option>colo7</option>
<option>colo8</option> </select>,
PM - Nom :
Coordonn&eacute;es :,

Colo1 - Nom :
Coordonn&eacute;es :,

Colo2 - Nom :
Coordonn&eacute;es :,

Colo3 - Nom :
Coordonn&eacute;es :,

Colo4 - Nom :
Coordonn&eacute;es :,

Colo5 - Nom :
Coordonn&eacute;es :,

Colo6 - Nom :
Coordonn&eacute;es :,

Colo7 - Nom :
Coordonn&eacute;es :,

Colo8 - Nom :
Coordonn&eacute;es :,

----

Lune,
,

,

,

,

,

,

,

,

,

----

Rapports espionnage,
<textarea cols="20" rows="7" name="rapport"></textarea>,

<textarea cols="20" rows="7" name="rapport1"></textarea>,

<textarea cols="20" rows="7" name="rapport2"></textarea>,

<textarea cols="20" rows="7" name="rapport3"></textarea>,

<textarea cols="20" rows="7" name="rapport4"></textarea>,

<textarea cols="20" rows="7" name="rapport5"></textarea>,

<textarea cols="20" rows="7" name="rapport6"></textarea>,

<textarea cols="20" rows="7" name="rapport7"></textarea>,

<textarea cols="20" rows="7" name="rapport8"></textarea>,

----

Commentaire : <textarea cols="50" rows="2" name="commentaire"></textarea>

</form>

</html>

Merci à tous ^^

Bientôt maître d'une nouvelle ère de RPG.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
à PetOleTeam :
vous en êtes un autre cher ami ( je parle d'excellent,
on devrait se dire ça plus souvent... )
c'est vrai qu'il y avait des erreurs de syntaxe dans
le script fourni et que j'aurais du les signaler. c'est fait.

à WorstAngel :
je suppose que ça veut dite que lorsqu'on affiche
colo# il faut aussi afficher rapport# ?

Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO>
</S< body>
Messages postés
42
Date d'inscription
mardi 21 février 2006
Statut
Membre
Dernière intervention
5 juillet 2006

et bien en fait il faut que cela affiche les blocs [nom - coordonnées] [lune] et [rapport] selon le choix du SELECT ...
on choisi colo1 on affiche
<td id="colo1" style="display: none">Colo1 - Nom : Coordonn&eacute;es :</td>
<td id="colo1" style="display: none"></td>
ET
<td id="colo1" style="display: none"><textarea cols="20" rows="7" name="rapport1"></textarea></td>
le tout dans le même tableau et à la droite de la colone PM......

---------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.
Messages postés
42
Date d'inscription
mardi 21 février 2006
Statut
Membre
Dernière intervention
5 juillet 2006

Faudrait-il mettre class à la place d'id ?...
(souvenir du CSS)
--------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,
alors, tel que c'est fait là :
soit ° mettre un id dans le tr et afficher/cacher ce tr ( cette ligne )
soit ° transmettre à la fonction un 2ème paramètre qui est le 2ème champ à cacher/montrer
soit ° transmettre à la fonction un n° # qui permettra de gérer colo# et rapport#
soit ° ... euh, c'est tout ce qui me vient pour l'instant...
il y a sûrement d'autres possibilités
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO>
</S< body>
Messages postés
42
Date d'inscription
mardi 21 février 2006
Statut
Membre
Dernière intervention
5 juillet 2006

en fait c'est pas une ligne c'est une colone ce qui complique l'affaire ...
"soit ° transmettre à la fonction un 2ème paramètre qui est le 2ème champ à cacher/montrer"
je crois que cette option me convient mais il y a lune a afficher aussi ...
là je ne vois pas comment arranger ce code pour afficher les 3 autres

<script language="JavaScript">
var prec=false;
function afficherAutre(sel)
{
if ( prec )
{
prec.style.display="none";
}
prec=document.getElementById(sel[sel.selectedIndex].text);
prec.style.display="block";
}
</script>

----------------------------------------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,
on peut parfaitement cacher une colonne.

for (var l=0;l<tableau.rows.length;l++)
{
tableau.rows[l].cells[n° colonne à cacher].style.display="none";
}

Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO>
</S< body>
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
mais pas sûr que ?.rows.length soit digéré par FF.
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO>
</S< body>
Messages postés
42
Date d'inscription
mardi 21 février 2006
Statut
Membre
Dernière intervention
5 juillet 2006

Ben merci quand même je vais essayer de trouver quelqu'un qui pourrait me faire ce code ac rows.lenght ...

Merci encore ++
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...

Sorry mais je n'ai pas beaucoup de temps à consacrer à l'araignée..

Juste pour information table.rows.lenght est tout à fait accepté par FireFox...

Petit coup de PUB, pas l'anglais...

Va voir les sources de Pour tout savoir sur cela devrait surement t'aider dans tes recherches...

;0)