Affichage d'un texte dans un document.

**Luffy49** · 24/03/2007, 11h50

Voila mon problème :

Je voudrais que lorsque quelqu'un clique sur un lien que cela fasse apparaître un texte juste en dessous et que lorsque qu'il reclique celui ci disparraise.

voila ce que j'ai tenter :

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
 
<html>
<head>
 
<script language="JavaScript">
 
function afficher(form1){
 
document.write("testseset");
 
}
 
</script>
</head>
<body>
		<h3> Note de Synthèse : Inventaire/Gestion de Parc </h3> 
		<form name="form1">
	<p><input type="button" value="Envoyer" onClick="afficher(form1)" > <a href='#' onClick="afficher(form1)">test</a></p>
</form>
 
<body>
</html>

Est-ce que quelqu'un aurait une idée ?

**Bisûnûrs** · 24/03/2007, 11h54

A quoi te sert ton paramètre form1 dans l'appel de ta fonction ?

Sinon tu peux t'inspirer de ça :
http://javascript.developpez.com/faq...Objs#TextCheck

**Luffy49** · 24/03/2007, 12h18

le paramettre form1 c'est juste pour lui indiquez ce qu'il doit afficher

par exemple une truc du style :

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
<html>
<head>
 
<script language="JavaScript">
 
function afficher(nom){
 
if(nom==glpi)
{
document.write("texte sur glpi");
}
 
if(nom==isa)
{
document.write("Texte sur isa");
}
 
if(nom==apache)
{
document.write("Le projet apache...");
}
 
}
 
</script>
</head>
<body>
		<h3> Note de Synthèse : Inventaire/Gestion de Parc </h3> 
		<p><a href='#' onClick="afficher(glpi)">test</a></p>
                <p><a href='#' onClick="afficher(isa)">test</a></p>
                <p><a href='#' onClick="afficher(apache)">test</a></p>
</form>
 
<body>
</html>

J'ai vu la solution que tu ma proposer et j'y avais penser mais j'aimerait ne pas utiliser de formulaire. Le JavaScript ne permet pas d'inserer du texte dans un document ??? pourtant je les déjà vu sur d'autre site

**Bisûnûrs** · 24/03/2007, 12h34

Je ne t'ai pas dit de passer par un formulaire, mais de t'en inspirer.

Il faut éviter également d'utiliser document.write.

Enfin, tu ne mets pas les quotes à l'appel de ta fonction, ni dans le code de ta fonction, pourtant c'est bien du texte.

Code html :

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

onClick="afficher('glpi')"

Tu peux dans ce cas utiliser le DOM ou une bête fonction Javascript.

Code html :

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

1
2
<div id="textDyn"></div>
<a href="javascript:;" onclick="afficher('texte')">Blabla</a>

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
 
/* fonction innerHTML */
function afficher(texte){
   if(nom == texte){
      document.getElementById('textDyn').innerHTML = 'Ton nouveau texte';
   }
   ...
}
 
/* DOM */
function afficher(texte){
   if(nom == texte){
      document.getElementById('textDyn').appendChild(document.createTextNode('Ton nouveau texte'));
   }
   ...
}

Tu peux aussi, pour un meilleur référencement de ton texte, l'écrire dans des balises que tu masques/affiches selon le lien cliqué :

Code html :

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

1
2
3
4
5
6
<div id="texte1" style="display:none">Texte 1</div>
<div id="texte2" style="display:none">Texte 2</div>
<div id="texte3" style="display:none">Texte 3</div>
<a href="javascript:;" onclick="afficher(document.getElementById('texte1')">Blabla1</a>
<a href="javascript:;" onclick="afficher(document.getElementById('texte2')">Blabla2</a>
<a href="javascript:;" onclick="afficher(document.getElementById('texte3')">Blabla3</a>

Code :

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

1
2
3
4
5
6
function afficher(obj){
   for(var i = 1; i <= 3; i++){
      document.getElementById('texte' + i).style.display = 'none';
   }
   obj.style.display = 'block';
}

**Luffy49** · 24/03/2007, 14h03

Merci bcp pour ton aide voilà la solution retenu que j'ai retenu qui me paraît très pratique :

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
<?session_start();?>
<html>
<head>
<title>"Luffys IG Concept : PTI/Projet"</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Language" content="fr" />
 
<link rel="stylesheet" type="text/css" href="design.css">
 
<script language="JavaScript">
 
function afficher(nom){
 
// Masque tous les div text1 a 3
 for(var i = 1; i <= 3; i++){
      document.getElementById('text' + i).style.display = 'none';
  }
 
 
   obj=document.getElementById(nom);
 
// affichage du text cliquer
   if(obj.style.display=='none'){
   obj.style.display ='block';
   }
// Masquage tu text cliquer
   else{
   obj.style.display ='none';
   }
 
 
}
 
</script>
 
</head>
 
<div id="conteneur">
		<h1 id="header">
		<?
		$site='pti';
		include('login.php');
		include('annonce.php');?>
		</h1>
		<?
		include('menu.php');
		?>
 
<?
//VERIFICATION DE L'AUTHENTIFICATION DE L'UTILISATEUR
		$auth=true;
		if((!isset($_SESSION['login']))||(empty($_SESSION['login'])))
		{
		$auth=false;
		}
 
?>
		<div id="contenu">
 
		<!-- NOTE DE SINTHESE-->
		<h3> Note de Synthèse : Inventaire/Gestion de Parc </h3> 
 
 
	<a href="javascript:" onClick="afficher('text1')"> Cliquer ici</a></p>
	<div id="text1" style="display:none;">Mon texte a afficher</div>
 
 
 
		</div>
<p id="footer">Réalisation des codes xhtml & css et du design par Guilleret Florian</p>
</div>
 
<body>
</html>

Merci encore

**Bisûnûrs** · 24/03/2007, 14h13

Ton test :

Code :

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

1
2
3
4
5
6
7
8
// affichage du text cliquer
   if(obj.style.display=='none'){
   obj.style.display ='block';
   }
// Masquage tu text cliquer
   else{
   obj.style.display ='none';
   }

est inutile, dans tous les cas il passera dans le if, vu que juste avant tu fais une boucle pour les passer tous à none.

Mon code était suffisant.

**Luffy49** · 24/03/2007, 19h32

erf j'ai oublier de modifier.

Ta technique ne me convenait pas vu que je voulais :

- on click sa affiche le div
- on reclick sa l'enlève
- ceci sans masquer les autres div
- Ce n'était pas très souple si l'on veut rajouter un div il faut modifier le for...
- Et puis les text1,2,3 ce n'est pas très pratique et explicite

donc j'ai fait :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function afficher(nom){
   obj=document.getElementById(nom);
 
// affichage du text cliquer
   if(obj.style.display=='none'){
   obj.style.display ='block';
   }
// Masquage tu text cliquer
   else{
   obj.style.display ='none';
   }

Affichage d'un texte dans un document.

JavaScript

Discussions similaires

Partager

Partager