Affichage texte lettre par lettre

Version imprimable

Bonjour à toutes et à tous,

Je me suis mis assez récemment au développement web, et je bloque sur un petit problème.
J'ai utilisé un script réalisé par marilyn-manson (pas le chanteur je crois ^^) qui me permet d'afficher un texte lettre par lettre.
Je voudrais faire en sorte que ce texte change en fonction de l'endroit où clique le visiteur (sans changement de page). J'ai essayé pour cela d'utiliser des <INPUT.../>. Voilà mon code:
Code:

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr" lang="fr"> <head> <title>Yami no tenshi - Bienvenue sur mon site !</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <SCRIPT LANGUAGE=JavaScript> function changeMessage() { document.getElementById("zone").innerHTML = texte[actual_texte]; actual_texte++; if(actual_texte >= texte.length) actual_texte = nb_msg; } function affiche_txt() { var chaine=document.getElementById("monInput").value; var nb_car = chaine.length; var tableau = chaine.split(""); texte = new Array; var txt = ''; var nb_msg = nb_car - 1; for (i=0; i<nb_car; i++) { texte[i] = txt+tableau[i]; var txt = texte[i]; } actual_texte = 0; if(document.getElementById) setInterval("changeMessage()",30); } </SCRIPT> </head> <body> <div id="banniere"> <input type="hidden" id="monInput" value="ma phrase de base" /> </div> <div id="test"> <input type="button" value="Change" onClick="document.getElementById('monInput').value='nouvelle phrase'; affiche_txt();" /> </div> <div id="zone"> Essai </div> </body> </html>
Donc lorsque je clique sur mon bouton "changer", sous mozilla firefox tout le texte va s'écrire puis disparaitre pour laisser place à "undefined", tandis que sous IE le texte va rester mais dans la barre du bas il va être écrit "Erreur sur la page".
Donc voilà je voulais savoir si vous aviez des idées pour résoudre mon problème, en espérant avoir été assez clair...
Je vous remercie par avance!
Yami

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr" lang="fr">
 
<head>
 
	<title>Yami no tenshi - Bienvenue sur mon site !</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
		<SCRIPT LANGUAGE=JavaScript>
		var textes=new Array();
		textes[0]="phrase numéro un";
		textes[1]="bla bal bla bla blabla ";
		textes[2]="encore du baratin";
		textes[3]="cette fois c'est fini";			
		var i=0	;	
		var indice=-1
 
		function changeMessage(obj)	{
		  if(indice==-1){obj.innerHTML=""}		
		   indice++;
			var chaine=textes[i];
	       var tableau = chaine.split("");
			var nb_car = tableau.length; 
			//alert(indice)
			if(indice<nb_car){
			     obj.innerHTML+=tableau[indice];
 
			     setTimeout(function(){changeMessage(obj)},100);}
 
			else { 
			       i=(i<textes.length-1)?i+1:0;
			       indice=-1;
 
			}    
 
		}
		</SCRIPT>
 
 
</head>
 
<body>
 
	<div id="banniere">
	<input type="hidden" id="monInput" value="ma phrase de base" />
	</div>
 
	<div id="test">
	<input type="button" value="Change" onClick="changeMessage(document.getElementById('zone'));" />
	</div>
 
	<div id="zone">
	Essai
	</div>
 
</body>
</html>

01/09/2008, 18h03
Yami no tenshi

Wahooo merci beaucoup. :D

J'aurai par contre encore une petite requête, j'aimerai qu'à un bouton corresponde une phrase prédéfinie (or là, c'est le même bouton qui modifie la phrase dans l'ordre des phrases dans le tableau).

Par exemple je voudrai que quand on clique sur le Bouton 1 le texte soit "Bonjour", quand on clique sur le Bouton 2 le texte devienne autre chose, mais si on retourne au Bouton 1 on revienne sur "Bonjour", et ce quel que soit le nombre de boutons.

Il doit faloir agir sur la variable "i" non?

Merci d'avance!
Yami
01/09/2008, 21h36
SpaceFrog

Oui là je boucle sur texte[i] ....

Suffit de virer la boucle et de fixer un i en paramètre de la fonction ...
Si tu n'y arrives pas je regarde ça demain ...

Je te remercie, j'ai réussi à faire ça. Merci.

Par contre j'ai encore un mini souci... Mes phrases risquent d'être assez longues. Du coup quand je clique sur le premier bouton, la phrase commence à s'afficher, et si j'appuie sur le second bouton avant que la première ne se termine, c'est la première phrase qui recommence à s'écrire...

Code:

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
<head>
 
	<title>Yami no tenshi - Bienvenue sur mon site !</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
		<SCRIPT LANGUAGE=JavaScript>
		var textes=new Array();
		textes[0]="Première phrase qui se veut moyennement longue";
		textes[1]="bla bal bla bla blabla bla bla bla bla bla bla bla bla bla";
		textes[2]="encore du baratin";
		textes[3]="cette fois c'est fini";
		textes[4]="...zZzZzZzZzZzZz...";			
		//var i=0;	
		var indice=-1;
 
		function changeMessage(obj,i)	{
		  var now = new Date();
		  var hours = now.getHours();
		  if((hours >= 23) || (hours <7))
		  {	
			i = 4;
		  } 
		  if(indice==-1){obj.innerHTML=""}		
		   indice++;
		   var chaine=textes[i];
	       var tableau = chaine.split("");
		   var nb_car = tableau.length; 
			//alert(indice)
			if(indice<nb_car){
			     obj.innerHTML+=tableau[indice];
 
			     setTimeout(function(){changeMessage(obj,i)},30);}
 
			else { 
			       i=(i<textes.length-1)?i+1:0;
			       indice=-1;
 
			}    
 
		}
		</SCRIPT>
 
 
</head>
 
<body onLoad="changeMessage(document.getElementById('zone'),0);">
 
	<div id="banniere">
	<input type="hidden" id="monInput" value="ma phrase de base" />
	</div>
 
	<div id="test">
	<input type="button" value="Change" onClick="changeMessage(document.getElementById('zone'),1);" />
	<input type="button" value="Change2" onClick="changeMessage(document.getElementById('zone'),2);" />
	</div>
 
	<div id="zone">
	Essai
	</div>
 
</body>

Est-il possible d'y faire quelque chose?
Merci d'avance :D

03/09/2008, 12h49
SpaceFrog

tu veux empêcher qu'une autre phrase soit prise en compte avant la fin de la précédente ?

oui ça peut s'inhiber ... avec un test ...
03/09/2008, 13h22
Yami no tenshi

Pas tout à fait. Je voudrai que ce soit la dernière phrase passée en paramètre qui s'affiche (donc la phrase du dernier bouton sur lequel on a cliqué). Du coup l'affichage de l'autre phrase devra être interrompu et je ne vois pas du tout comment on peut faire ça...