Afficher une variable

**Super_carotte** · 17/05/2010, 09h43

Bonjour a vous,
J'essaie, dans une page en .html, de créer un lien pour qu'un utilisateur indique son prénom et pour que le dit prénom s'affiche.
J'ai donc créer ce code:

Code :

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

1
2
3
4
5
<SCRIPT language="javascript">document.write("Prénom: "+prenom1); </SCRIPT> <br>
 
Change d'utilisateur en cliquant:
<href="#" onClick="prenom1 = demandeprenom(prenom1)";>
<font color="red">ICI</font> <br>

la ligne prenom1 = demandeprenom(prenom1) permet d'appeller la fonction qui est dans fonction.js, la voici:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function demandeprenom()
{
	var prenom1=prompt("Bonjour, commence par indiquer ton prénom :","");
	if (prenom1!=null && prenom1!="")
  		{
		//self.location.href="index.html?prenom1="+prenom1;
  		}
  	else demandeprenom()
 return prenom1;
 
 
}

Et enfin, la variable "prenom1" est déclarée dans le fichier variables.js comme ceci:

Code :

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

var prenom1 = "";

Mon probleme est que lorsque je clique sur le lien, je vois bien mon alert qui s'affiche donc j'indique un prenom.
Mais le prenom ne s'affiche pas sur le index.html ou il y a pourtant la ligne:

Code :

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

<SCRIPT language="javascript">document.write("Prénom: "+prenom1); </SCRIPT> <br>

Auriez vous une idée pour l'afficher?
Merci beaucoup,
Benjamin

**vermine** · 17/05/2010, 09h55

Bonjour,

Je ferais autrement:

Code :

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

1
2
 
onClick="demandeprenom(prenom1)";>

Sans retour car j'irai mettre directement le nom depuis la fonction:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function demandeprenom()
{
	var prenom1=prompt("Bonjour, commence par indiquer ton prénom :","");
	if (prenom1!=null && prenom1!="")
  		{
		//self.location.href="index.html?prenom1="+prenom1;
  		}
  	else demandeprenom()
 document.getElementById('mon_id').innerHTML = prenom1;
}

'mon_id' étant l'id d'un par exemple, qui serait l'endroit où je veux voir le nom (donc on oublie le document.write sauf si il vous sert au chargement de la page):

Code :

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

1
2
 
<span id='mon_id'></span>

**Super_carotte** · 17/05/2010, 10h31

Merci pour cette solution mais si j'enleve mon document.write, comment je fais pour faire afficher ma variable dans le span? c'est que du html la dedans non? le html ne peux pas afficher de variable il me semble.

**Bovino** · 17/05/2010, 10h35

Envoyé par Super_carotte

Merci pour cette solution mais si j'enleve mon document.write, comment je fais pour faire afficher ma variable dans le span? c'est que du html la dedans non? le html ne peux pas afficher de variable il me semble.

Tu es sûr d'avoir bien lu la réponse de vermine ?

**Super_carotte** · 17/05/2010, 10h42

Il a écrit:
"'mon_id' étant l'id d'un par exemple, qui serait l'endroit où je veux voir le nom (donc on oublie le document.write sauf si il vous sert au chargement de la page)"

Il me semble que ça veut dire que je ne mette plus de document.write mais autre chose dans mon nouveau span.

Mon niveau de dev est plutôt faible comme vous le voyez mais j'essaie de comprendre.

Oh! a moins que grace a l'ID, pas besoin de mettre autre chose que :
. Il affiche de lui meme la variable grace a:
document.getElementById('spanprenom').innerHTML = prenom1;

Est-ce bien ça?

**Super_carotte** · 17/05/2010, 10h46

En effet, ça fonctionne magnifiquement.
Un grand merci a vous

**vermine** · 17/05/2010, 10h49

Oui, c'est bien cela, excepté qu'il vaut mieux mettre les quotes:

Code :

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

<span id='spanprenom'></span>.

Par contre, si cette partie doit être remplie ai chargement de la page avec des donnérs DB ou de la page précédentes, il faudra rajouter une instruction dans le onload du body.

**Super_carotte** · 17/05/2010, 10h59

Par contre, a chaque fois que je clique sur un lien, ça lance la fonction demandeprenom().
Or la seule fois dans mon code ou il est demandé c'est la:

Change d'utilisateur en cliquant:
<href="#" onClick="prenom1 = demandeprenom(prenom1)";>
ICI 

En fait, mon index.html est constitué avec une colonne a gauche avec plein de lien qui lancent des exercices
Et le probleme c'est a mon avis du au fait que, quand je clique sur un lien, (qui n'ouvrent pas une nouvelle page mais qui modifient le bloc droit de la page) ça doit recharger entierement la page. Et donc repasser sur le "prenom1 = demandeprenom(prenom1)" et donc me réouvrir le alert de demande du prenom.

Comment eviter ça? Est il possible de rendre cette ligne "passive" c'est a dire qu'elle ne s'active que lors du clique et pas lors du rechargement de la page?

**vermine** · 17/05/2010, 11h25

Comme sugéré par je ne sais plus qui dans le premier topic, on peut vérifier si le prénom apparait déjà et exécuter ou non la fonction:

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
function demandeprenom()
{
      var span_prenom = document.getElementById('spanprenom');
      
      if(span_prenom.innerHTML == "")
      {
	var prenom1=prompt("Bonjour, commence par indiquer ton prénom :","");
	if (prenom1!=null && prenom1!="")
  		{
		//self.location.href="index.html?prenom1="+prenom1;
  		}
  	else demandeprenom()

            span_prenom.innerHTML = prenom1;
       }
}

Sauf que dans ce cas-là, on ne peut pas changer de prénom une seconde fois.

Appelez-vous cette fonction à plusieurs endroits ?

**vermine** · 17/05/2010, 11h30

Pourquoi ceci ?

Code :

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

onClick="prenom1 = demandeprenom(prenom1)";>

Vous avez une variable globale de ce nom là ? Sinon alors mettez ceci et sa règlera sans doute le problème:

Code :

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

onClick="demandeprenom()";>

**Super_carotte** · 17/05/2010, 11h43

C'est parfait!
Merci beaucoup vermine

**Super_carotte** · 17/05/2010, 13h17

Interéssé par la methode des span que tu m'as montré, j'ai essayé d'en creer un autre. Cependant il y a apparement un probleme car rien ne s'affiche sur mon html.

Comme code j'ai:
pour ma page html:

Code :

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

<span id='spandebutactivite'></span>

Dans mon fichier fonctions.js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function debutactivite() 
{ 
var span_activite = document.getElementById('spandebutactivite'); 
 
if(prenom1 == ""){ 
span_activite.innerHTML ="commencer l'activité en cliquant ici"; 
 
} 
else{ 
span_activite.innerHTML = "changer d'utilisateur en cliquant ici"; 
}

Vois tu ce qui manque?
Merci,
Benjamin

**vermine** · 17/05/2010, 13h36

A mon sens, prenom1 est une variable locale de la fonction demandeprenom. Donc seule cette fonction connait cette variable. Pour qu'elle soit connue autre part:

- soit vous la rendez globale.

- soit en la récupérant en début des fonctions qui désirent l'utiliser:

Code :

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

1
2
3
4
5
6
7
8
 
function debutactivite() 
{ 
   var span_activite = document.getElementById('spandebutactivite'); 
   var prenom1 = document.getElementById('spanprenom').innerHTML;
 
if(prenom1 == ""){ 
   //...

**Super_carotte** · 18/05/2010, 10h20

J'ai essayé mais ça ne prend pas, rien ne s'affiche.

J'ai mis 2 alert pour voir si ils passaient mais rien. J'ai tester ça:

Dans fonction.js:

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
function debutactivite() 
{ 
   var span_activite = document.getElementById('spandebutactivite'); 
   var prenom1 = document.getElementById('spanprenom').innerHTML;
 
if(prenom1 == ""){ 
 
span_activite.innerHTML ="commencer l'activité en cliquant ici"; 
alert("1111111111111: ");
} 
else{ 
span_activite.innerHTML = "changer d'utilisateur en cliquant ici"; 
alert("22222222222222: ");
}
}

Dans index.html:

Code :

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

<span id='spandebutactivite'></span>

Merci de ton aide,
Benjamin

**vermine** · 18/05/2010, 10h29

Vous avez toujours ce span-ci dans la page ?

Code :

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

<span id='spanprenom'></span>

Il doit être présent.
Essayez un peu ceci:

Code :

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

1
2
3
4
5
6
7
8
 
function debutactivite() 
{ 
   var span_activite = document.getElementById('spandebutactivite'); 
   var prenom1 = document.getElementById('spanprenom').innerHTML;
 
   alert("-"+prenom1+"-");
   //...

**Super_carotte** · 18/05/2010, 11h02

Je n'ai aucun alert qui s'affiche.

**vermine** · 18/05/2010, 11h11

Avez-vous effectué l'appel de cette fonction quelque part dans la page ? Je vous conseille de le faire dans le body:

Code :

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

1
2
 
<body onload="debutactivite();">

**Super_carotte** · 18/05/2010, 11h17

Merci de tenter de m'aider.

Mais j'ai toujours rien.
Je vous met le code, au cas ou ça puisse vous aider:

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
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
172
173
174
175
176
177
178
179
180
181
182
183
<HTML>
  <HEAD>
    <TITLE>Accompagenement scolaire
    </TITLE>
    <link href="crdp.css" rel="stylesheet" type="text/css">
 <SCRIPT LANGUAGE="JavaScript" SRC="variables.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="fonctions.js"></script>
 
</head>
 
 
 </HEAD>
 
 <script language="javascript">
 
//prenom1 = demandeprenom(prenom1);
 
</script>
 
 
  <BODY bgcolor=white  onLoad="montreMenu('smenu0')">
 
<body onload="debutactivite();">
 
 
 
      <TABLE id="tab1" border="1" width="100%" height="100%">
        <tr height="80"><td>
            <TABLE id="tab2" border="0" width=100%" height="60" cellpadding="0" cellspacing="0">
              <tr height="80">	
                <td align="left" bgcolor="lime" width="80" valign="middle" id="gauche" class='meta'>
                  <img src="images/Logo_Sceren_Nice_BLANC.png" /></td>
 
                <td  align="CENTER" bgcolor="##33CCFF" class='titre' id="millieu">Les Fondamentaux en français
                </td>	
				<td width="200" align="right" bgcolor="#EF998A">
                  <h1>
 
 
 
					</h1></td>
 
                <td width="50" align="right" bgcolor="#EF998A">
 
				<a href="#" onclick="window.location.reload( true );" ><img src="images/classe.jpg" /></a></td>
 
              </tr>
            </TABLE></td>
        </tr>
        <tr id="idprincipal" width="97%">
            <td class="principal" >
                 <table class="principal">
                    <tr>
                      <td id="idmenu" class="menu" >	
                          <dl>
 
						  Prénom: 
						<span id='spanprenom'></span>
						<br>
 
 
						<SCRIPT language="javascript">
							document.write("Pour voir ta fiche de score, clique: ");							
						</SCRIPT>							
 
							<a><href="#" onClick="Montrer(score_document)"  >
							<font color="red">ICI</font></a><br><br>
 
 
						<span id='spandebutactivite'></span>
 
 
 
 
                            <dt onClick="montreMenu('smenu0'); Montrer('intro.html');affichetitre('presentation_');" class='ctitre' >Présentation
                            </dt>			
                            <dd id="smenu0">			
                              <span class='texte'>			
                                <SCRIPT language="javascript">document.write(aide); </SCRIPT><br />		 			
                              </span>		
                            </dd>		
                            <dt onClick="montreMenu('smenu2');" class='ctitre' >Savoir lire
                            </dt>			
                            <dd id="smenu2">				
                              <ul>
                              <li>
                                <A href="#" onClick="Montrer(sl_1_document)"  >
                                <SCRIPT language="javascript">document.write(sl_1_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(sl_2_document)"  >
                                <SCRIPT language="javascript">document.write(sl_2_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(sl_3_document)"  >
                                <SCRIPT language="javascript">document.write(sl_3_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(sl_4_document)"  >
                                <SCRIPT language="javascript">document.write(sl_4_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(sl_5_document)"  >
                                <SCRIPT language="javascript">document.write(sl_5_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(sl_6_document)"  >
                                <SCRIPT language="javascript">document.write(sl_6_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(sl_7_document)"  >
                                <SCRIPT language="javascript">document.write(sl_7_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(sl_8_document)"  >
                                <SCRIPT language="javascript">document.write(sl_8_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(sl_9_document)"  >
                                <SCRIPT language="javascript">document.write(sl_9_titre); </SCRIPT></A></li>
                              </ul>			
                            </dd>	 		
                            <dt onClick="montreMenu('smenu3');" class='ctitre' style ="height :50">Savoir lire<br>pour savoir écrire
                            </dt>			
                            <dd id="smenu3">				
                              <ul>				 				
                              <li>
                                <A href="#" onClick="Montrer(se_1_document)"  >
                                <SCRIPT language="javascript">document.write(se_1_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_2_document)"  >
                                <SCRIPT language="javascript">document.write(se_2_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_3_document)"  >
                                <SCRIPT language="javascript">document.write(se_3_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_4_document)"  >
                                <SCRIPT language="javascript">document.write(se_4_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_5_document)"  >
                                <SCRIPT language="javascript">document.write(se_5_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_6_document)"  >
                                <SCRIPT language="javascript">document.write(se_6_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_7_document)"  >
                                <SCRIPT language="javascript">document.write(se_7_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_8_document)"  >
                                <SCRIPT language="javascript">document.write(se_8_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_9_document)"  >
                                <SCRIPT language="javascript">document.write(se_9_titre); </SCRIPT></A></li>
                                <li>
                               <A href="#" onClick="Montrer(se_10_document)" >
                                <SCRIPT language="javascript">document.write(se_10_titre); </SCRIPT></A></li>
                              </ul>			
                            </dd>
 
                            <dt onClick="Montrer('bibliotheque/index.html');montreMenu('smenu5');affichetitre('bibli_id_');" class='ctitre' style ="height :50">Bibliothèque Idéale
                            </dt>			
 
                            <dt onClick="montreMenu();">
                              <a href="./index.html">Retour</a>
                            </dt>	
                            <dt onClick="Montrer('credits.html');affichetitre('credits_');" style="text-align:right;">Crédits
                            </dt>
 
                          </dl>	
                        </td>
                         <td id="idpetitmenu" class="petitmenu"  onMouseOver="effmenulateral();" >	
                         afficher le menu
                         </td>
               <td id="corps" class="corps" valign="top">
                      <iframe class="corps" id="moncalque" src="technique.html" onLoad="haut();" scrolling="no" width="700px" height="500px" FRAMEBORDER="no"></iframe>          
 
 
         <SCRIPT language='javascript'>document.getElementById("moncalque").src="intro.html"; </SCRIPT>
              </td>	
              </tr>
              </table>        
            </td>
 
 
 
 
        </tr>
      </TABLE>
 
  </BODY>
</HTML>

Et pour le fonction.js:

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
function demandeprenom()
{
      var span_prenom = document.getElementById('spanprenom');
 
      if(span_prenom.innerHTML == "")
      {
	var prenom1=prompt("Bonjour, commence par indiquer ton prénom :","");
	if (prenom1!=null && prenom1!="")
  		{
		//self.location.href="index.html?prenom1="+prenom1;
  		}
  	else demandeprenom()
 
            span_prenom.innerHTML = prenom1;
       }
	   else demandeprenom()
}
 
function debutactivite() 
{ 
   var span_activite = document.getElementById('spandebutactivite'); 
   var prenom1 = document.getElementById('spanprenom').innerHTML;
	alert("-"+prenom1+"-");
 
if(prenom1 == ""){ 
 
span_activite.innerHTML ="commencer l'activité en cliquant ici"; 
alert("1111111111111: ");
} 
else{ 
span_activite.innerHTML = "changer d'utilisateur en cliquant ici"; 
alert("22222222222222: ");
}
}

**vermine** · 18/05/2010, 12h38

Vous avez déclaré deux fois le body.

Code :

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

1
2
3
4
 
 <BODY bgcolor=white  onLoad="montreMenu('smenu0')">
 
<body onload="debutactivite();">

Il vaut mieux ceci:

Code :

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

1
2
 
<BODY bgcolor="white"  onLoad="montreMenu('smenu0'); debutactivite();">

**SpaceFrog** · 18/05/2010, 12h42

voire même:

Code :

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

<body style="background-color:white;"  onload="montreMenu('smenu0'); debutactivite();">

Afficher une variable

JavaScript

Discussions similaires

Partager

Partager