["Problème"] Javascript

eSb` · 8 Oct 2006

J'ai des cours assez basiques de Javascript et je tente d'aller plus loin dans les exercices que l'on me propose; mais j'ai un petit soucis.

La page n'a strictement aucun intérêt, à part celui de m'améliorer ; ).

http://www.esb-studio.be/Gamerz/afficherBD2.htm

Je voudrais que lorsque je passe avec ma souris sur le bouton supérieur, toute la liste d'album soit affichée dans un fieldset.
Or, seul le dernier de la liste est affiché.

Ma boucle pourrait être fausse mais si j'utilise document.write la liste s'affiche normalement...

Comment puis-je faire pour afficher le contenu de mon tableau Javascript dans un paragraphe ?

Voici mon code source :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>Titres Albums : Spirou</title>
<script type="text/javascript"> 
var spirou = new Array() ;
var ch = new Array() ;
var numero;
var numero1;
spirou = ["Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu’est-ce que tu fabriques ?","C’est pour ton bien !","Merci qui ?","N’oublie pas ta capuche !","Demande à ton père !","T’as qu’à t’retenir !","C’est pas de ton âge !","Tu comprendras quand tu seras grand !"] ;
ch = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
var gr;
function RecupTitre()
{ 
	numero = parseFloat(document.BD.numero.value) - 1;
	numero1 = parseFloat(document.BD.numero.value) ;
	num = document.BD.numero.value;
		if (numero < 0 || numero >= 10)
			{
			document.getElementById("liste").innerHTML = "Cet album n'existe pas.";
			}
		else if (num == "")
			{
			document.getElementById("liste").innerHTML = "Veuillez introduire un chiffre, SVP.";
			}
		else 
			{
			document.getElementById("liste").innerHTML = "L'album numéro " + numero1 + " correspond à : " + spirou[numero];
			}
}
function AfficheListe()
{ 
	gr = spirou.length;
		for(i=0; i < gr; i = i + 1)
			{
			document.getElementById("listea").innerHTML = "&nbsp;" +ch[i] +"." +" " +spirou[i] +"<br>";
			document.getElementById("field").style.visibility="visible";
			}
}
function AfficheListeno()
{ 
	document.getElementById("listea").innerHTML = "";
	document.getElementById("field").style.visibility="hidden";
}
</script>
<style type="text/css">
<!--
.verdana
	{
	font-family: Verdana;
	font-size: 11px;
	}
.verdanaf
	{
	font-family: Verdana;
	}
input 
	{
	border:1px solid black;
	}
.input1
	{
	border:1px solid black;
	background-color: #d9dfe2;
	}
.marg
	{
	margin-left:10px;
	}
-->
</style>
	</head>
<body onload="AfficheListeno();">
<span class="verdana"><input type="button" value="Afficher la liste entière" onMouseover="AfficheListe();" onMouseout="AfficheListeno();" class="input1"></span>
<h3 class="verdanaf">Quel numéro ?</h3>
  <form name="BD">
	<input type="text" name="numero">
<br>
	<input type="button" value="Album correspondant au numéro" onClick="RecupTitre();">
<br>
  </form>
	<p id="liste" class="verdana"></p>
<fieldset id="field">
	<legend>
	<span class="verdana"><b>Liste:</b></span>
	</legend>
	  <form>
		<div id="listea" class="verdana marg"></div>
	  </form>
	</fieldset>
</body>
</html>

Merci d'avance pour votre aide ; ).

Ps: si mon code est améliorable, je suis preneur.

----------------------------------------------------------

Edit :

Après bidouillages, j'en suis là maintenant :
http://www.esb-studio.be/Gamerz/afficherBD6.htm

Et j'estime que c'est déjà pas trop mal

Soulsight · 8 Oct 2006

au niveau logique il y a un probléme en fait.

Je ne suis pas une bête en javascript et je n'ai pas envire de relire mes cours.

voilà ce que je ferai :

1 ) faire ta boucle
2 ) dans ta boucle tu enregistres l'enregistrement dans un array ou une var text assez longue que tu concaténes au contenu déjà présent
3 ) tu assignes cette var à ton évènement lors du survol de l'autre bouton.

Dans ta boucle, ton texte sera égale à la derniére valeur parcourue lors de la boucle et c'est logique

null · 8 Oct 2006

C'est normal, tu utilises :

document.getElementById("listea").innerHTML = valeur

ce qui a pour effet de remplacer le contenu du calque "listea". Dans ta boucle, tu remplaces à chaque fois le contenu pour le titre correspondant à i.

Tu dois donc simplement ajouter le nouveau titre au contenu précédent :

document.getElementById("listea").innerHTML = document.getElementById("listea").innerHTML + " " +ch +"." +" " +spirou +"<br>";

Là, plus de prob

Maintenant, je te conseille d'écrire ton code comme ça :

Code:

<script type="text/javascript"> var spirou = new Array(); spirou = ["Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu’est-ce que tu fabriques ?","C’est pour ton bien !","Merci qui ?","N’oublie pas ta capuche !","Demande à ton père !","T’as qu’à t’retenir !","C’est pas de ton âge !","Tu comprendras quand tu seras grand !"]; var ch = new Array(); ch = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; var numero; var numero1; function element_bloc(id) { if (!document.getElementById) return; if (document.all) return eval("document.all." + id); else return document.getElementById(id); } function RecupTitre() { numero = parseFloat(document.BD.numero.value) - 1; numero1 = parseFloat(document.BD.numero.value) ; num = document.BD.numero.value; if (numero < 0 || numero >= 10) element_bloc("liste").innerHTML = "Cet album n'existe pas."; else if(num == "") element_bloc("liste").innerHTML = "Veuillez introduire un chiffre, SVP."; else element_bloc("liste").innerHTML = "L'album numéro " + numero1 + " correspond à : " + spirou[numero]; } function AfficheListe() { for(i=0; i < spirou.length; i++) { element_bloc("listea").innerHTML = element_bloc("listea").innerHTML + " " + ch[i] + "." + " " + spirou[i] + "<br>"; element_bloc("field").style.visibility = "visible"; } } function AfficheListeno() { element_bloc("listea").innerHTML = ""; element_bloc("field").style.visibility = "hidden"; } </script>

Je t'ai ajouté une fonction "element_bloc()" qui fait comme "document.getElementById()" sauf que ça fonctionne sur tout les navigateurs.

Comme tu l'auras aussi remarqué, quand tu fais une condition, s'il n'y a qu'une ligne dans la condition, tu peux omettre les crochets (c'est plus lisible).

J'ai aussi modifié la boucle for :

for(i=0; i < spirou.length; i++)

Cliquez pour agrandir...

J'ai enlevé la création de la variable "gr" et le remplissage de celle-ci et j'ai directement comparé avec la taille. Pour incrémenter "i", tu peux écrire "i++" au lieu de "i = i+1".

J'espère avoir été clair :]
Bonne nuit

eSb` · 9 Oct 2006

Et bien, je vous remercie tous les deux.

Mon erreur était assez stupide mais je n'y avais absolument pas pensé :-D.

Pour ma déclaration de "gr", je sais elle n'avait aucun intérêt mais c'était juste pour que ce soit plus court (mais en fait, tu me fais remarquer que ça mène à l'effet inverse)

Et i++ je connaissais, mais bon, on n'y gagne pas grand chose

.

J'ai juste un peu de mal avec ta fonction element_bloc(id) :

Code:

function element_bloc(id)
{
   if (!document.getElementById)
       return;

   if (document.all)
       return eval("document.all." + id);
   else
       return document.getElementById(id);
}

Y aurait-il moyen de la commenter ? : ).
En fait, je n'ai pas vu grand chose sur les paranthèses des fonctions et absolument rien sur les "return". Je tente de me renseigner malgré tout.

Merci d'avance

guslinux · 9 Oct 2006

eSb` a dit:
Y aurait-il moyen de la commenter ? : ).
En fait, je n'ai pas vu grand chose sur les paranthèses des fonctions et absolument rien sur les "return". Je tente de me renseigner malgré tout.

Merci d'avance

le return c'est simple, quand tu appelles une fonction, tu lui donnes un argument et elle re répond avec un retour.

Appel de la fonction :

Code:

retour = ma_fonction(argument)

Au niveau de la descriptionde la fonction on fera ceci :

Code:

function ma_fonction(mon_argument){
    //Actions à effectuer...
    return la_valeur_a_renvoyer;
}

Si dans ta fonction "la_valeur_a_renvoyer" vaut 100, "retour" recevra la valeur 100.

Bien sur, ce qui est valable pour des nombres l'est aussi pour tout types de variable javaScript.

eSb` · 9 Oct 2006

Merci, mais je ne perçois pas quand même comment fonctionne la première ligne :

Code:

   if (!document.getElementById)
       return;

Si document.getElementById n'est pas disponible, alors .... ?

Calvin80 · 9 Oct 2006

...alors retourne rien.

null · 9 Oct 2006

Alors les navigateurs sont capables de traiter directement les calques je crois du genre "monCalque.proprietes".

Je ne sais même pas d'où ça vient car ce n'est pas moi qui l'ai codée mais elle ne m'a jamais créée de problèmes

guslinux · 9 Oct 2006

null a dit:
Alors les navigateurs sont capables de traiter directement les calques je crois du genre "monCalque.proprietes".

Je ne sais même pas d'où ça vient car ce n'est pas moi qui l'ai codée mais elle ne m'a jamais créée de problèmes

tu sais accéder au calque via son id => document.getElementById('Mon_Calque')

et dans les div on peut jouer sur
innerText, innerHTML

on peut aussi travailler sur le param style :
style.width
style.height
style.display
...

Il faut noter, que la manipulation des calques en JS couplé avec l'objet JS xmlHttpRequest ca permet de faire des requetes http en backgound (c'est le js qui va chercher les infos sur une page web ...)

Un petit exemple : http://devel.edoplan.be/SkyLEsS/PageWeb.php
Mettez vous à plusieurs dessu pour tester

eSb` · 10 Oct 2006

Encore deux petites questions ; ).

1.
Comment fait-on pour n'effectuer une fonction qu'une seule fois ?
J'illustre ma demande : http://www.esb-studio.be/Gamerz/afficherBD3.htm

Dans une version antérieure de mon 'programme', si on clique/reclique sur "Afficher la liste entière" la liste s'effectue indéfiniment. Or je voudrais qu'après un seul clic, la fontion soit désactivée.

J'ai trouvé une parade qui remplace le bouton à chaque clic, mais je voudrais quand même savoir comment stopper cette fonction : ).

2.
Ici, je m'embrouille et me casse la tête depuis tout à l'heure; mais ça ne doit pas être si compliqué.
Je voudrais en plus de ma 'liste', créer un bouton (+) automatiquement affichant l'image de la bd et son nom.
Or je ne sais pas comment 'faire le lien' automatiquement. (donc que tel bouton affiche l'image 'x', le bouton suivant l'image 'x + 1', ...)

J'ai créé une deuxième boucle mais je ne suis pas sur d'aller dans la bonne direction.
Quoiqu'avec des conditions, je pense que ça pourrait marcher, mais je ne sais pas lesquelles poser. (ici j'ai fait le test avec == 5)

http://www.esb-studio.be/Gamerz/afficherBD5.htm

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
	<title>Titres Albums : Spirou</title>
<script type="text/javascript"> 
var spirou = new Array();
 spirou = ["Dis Bonjour à la dame !","Tu veux mon doigt ?","Mais ! Qu’est-ce que tu fabriques ?","C’est pour ton bien !","Merci qui ?","N’oublie pas ta capuche !","Demande à ton père !","T’as qu’à t’retenir !","C’est pas de ton âge !","Tu comprendras quand tu seras grand !"];
var ch = new Array();
 ch = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var imgs = new Array()
 imgs[0] = ["img/1.jpg"];
 imgs[1] = ["img/2.jpg"];
 imgs[2] = ["img/3.jpg"];
 imgs[3] = ["img/4.jpg"];
 imgs[4] = ["img/5.jpg"];
 imgs[5] = ["img/6.jpg"];
 imgs[6] = ["img/7.jpg"];
 imgs[7] = ["img/8.jpg"];
 imgs[8] = ["img/9.jpg"];
 imgs[9] = ["img/10.jpg"];
var numero;
var numero1;


function element_bloc(id) // document.getElementById() Fonctionne sur tous les navigateurs
{
   if (!document.getElementById)
       return;
	   
   if (document.all)
       return eval("document.all." + id);
   else
       return document.getElementById(id);
}

function AfficheListeno() // Cacher la liste au démarrage et au clic
{ 
	element_bloc("aff").innerHTML = "<input type=\"button\" value=\"Afficher la liste entière\" onClick=\"AfficheListe();\" class=\"input1 verdana\" style=\"cursor:pointer;\ width:300px;\">"
	element_bloc("listea").innerHTML = "";
	element_bloc("field").style.display= "none";
	element_bloc("field").style.visibility = "hidden";	
}

function Onlimg() // Cacher l'image de l'album au démarrage et au clic
{ 
	element_bloc("tab").style.visibility = "hidden";
	element_bloc("liste").style.visibility = "hidden";	
}

function Blanc() // Donner pour valeur au champ de texte la valeur ""
{ 
	document.BD.numero.value = "";
}

function RecupTitre() // Fonction permettant d'afficher l'album en fonction du chiffre entré par l'utilisateur
{ 
	numero = eval(document.BD.numero.value) - 1;
	numero1 = eval(document.BD.numero.value) ;
	
	num = document.BD.numero.value;  
	
	if (numero < 0 || numero >= 10)
	{ 
	element_bloc("liste").innerHTML = "Cet album n'existe pas.";		
	element_bloc("tab").style.visibility = "hidden";
	element_bloc("liste").style.visibility = "visible";	
	}
	else if (num == "")
	{
		element_bloc("liste").innerHTML = "Veuillez introduire un chiffre, SVP.";
		element_bloc("tab").style.visibility = "hidden";
		element_bloc("liste").style.visibility = "visible";	
	}
	else 
	{
        element_bloc("liste").innerHTML = "L'album numéro " + numero1 + " correspond à : <br><b>" + "\"" + spirou[numero] + "\" </b>";
		element_bloc("tab").innerHTML = "<img src=\"" + imgs[numero] + "\" alt=\"\">";
		element_bloc("tab").style.visibility = "visible";
		element_bloc("liste").style.visibility = "visible";	
	}
}

function AfficheListe() // Fonction permettant d'afficher la liste de tous les albums
{ 
	element_bloc("aff").innerHTML = "<input type=\"button\" value=\"Liste Affichée\" onClick=\"AfficheListeno();\" class=\"input1 verdana\" style=\"cursor:pointer; width:300px;\">"
	for (i=0; i < spirou.length; i++)
	{
		element_bloc("listea").innerHTML = element_bloc("listea").innerHTML + "&nbsp;" + ch[i] + "." + " " + spirou[i] + " <input type=\"button\" class=\"input3 verdana\" value=\"+ (" + ch[i] + ")\" style=\"cursor:pointer;\" onClick=\"RecupTitreliste();\" name=\"\">" + "<br>" ;
		element_bloc("field").style.visibility = "visible";
		element_bloc("field").style.display= "block";
	}
}

function RecupTitreliste() // Fonction permettant d'afficher l'album en partant de la liste
{ 
	for (k=0; k < spirou.length; k++)
	{
		element_bloc("liste").innerHTML = "L'album numéro " + ch[k] + " correspond à : <br><b>" + "\"" + spirou[k] + "\" </b>";
		element_bloc("tab").innerHTML =  "<img src=\"" + imgs[k] + "\" alt=\"\">";
		element_bloc("tab").style.visibility = "visible";
		element_bloc("liste").style.visibility = "visible";
		if (ch[k] == 5)
		break;
	}		
}
</script>
<style type="text/css">
<!--
.verdana
	{
	font-family: Verdana;
	font-size: 11px;
	}
.verdanaf
	{
	font-family: Verdana;
	}
input 
	{
	border:1px solid black;
	}
.input1
	{
	border:1px solid black;
	background-color: #d9dfe2;
	}
.input2
	{
	border:1px solid;	;
	background-color: #ede9e8;
	float: right;
	margin-right: 10px;
	text-align: center;
	font-weight: bold ;	
	color: #3d404f;
	}
.input3
	{
	border: none;
	background-color: #fff;
	color: #815736;
	font-weight: bold ;	
	font-size: 9px;
	}
.marg
	{
	margin-left:10px;
	}
.imgs
	{
	border:1px solid black;
	height: 145px;
           width: 107px;
	}	
fieldset
	{
	width:500px; 
	margin-top:10px; 
	border:1px dashed;	
	}
legend
	{
	background-color: #FFFFFF;
	padding-right: 10px ;
	padding-left: 10px ;
	}   
-->
</style>
	</head>
<body onload="AfficheListeno(); Onlimg();">
<div id="aff"></div>
<fieldset id="field">
   <legend>
	<span class="verdana"><b>Liste:</b></span>
   </legend>
    <span><input type="button" value="Fermer" onClick="AfficheListeno();" class="input2 verdana" style="cursor:pointer;"></span>
	  <form>	  	
		<div id="listea" class="verdana marg"></div>
	  </form>
</fieldset>
<h3 class="verdanaf">Quel numéro ?</h3>
  <form name="BD">
	<input type="text" name="numero" onFocus="Blanc();" style="margin-bottom:2px;">
<br>
	<input type="button" value="Album correspondant au numéro" onClick="RecupTitre();">&nbsp;<input type="button" value="Vider" onClick="Onlimg();">
<br>
  </form>
	<p id="liste" class="verdana"></p>
<div id="tab" class="imgs"></div>
</body>
</html>

Merci ; ).

guslinux · 10 Oct 2006

Si tu veux que ta fonction ne s'execute qu'une seule fois, tu dois jouer avec une variable globale.

Exemple :

Code:

var EnableFunction = true;

function ma_fonction(){
     if(EnableFunction==false) return false;
     EnableFunction = false;

    ....

}

Et voila ...

Je viens de regarder son script, ca serait plus intelligent de remettre la liste à 0 avant de la remettre :

Code:

function AfficheListe()
{ 
        [COLOR=Red]element_bloc("listea").innerHTML = "";[/COLOR]
	for (i=0; i < spirou.length; i++)
	{
	     element_bloc("listea").innerHTML = element_bloc("listea").innerHTML + "&nbsp;" + ch[i] + "." + " " + spirou[i] + "<br>";
		 element_bloc("field").style.visibility = "visible";
		 element_bloc("listea").style.display= "block";
		 element_bloc("field").style.display= "block";
	}
}

eSb` · 10 Oct 2006

La liste est remise à 0 par l'appel de la fonction AfficherListeno()

Code:

function AfficheListeno()
{ 
	[COLOR=Red]element_bloc("listea").innerHTML = "";[/COLOR]
	element_bloc("listea").style.display= "none";
	element_bloc("field").style.display= "none";
	element_bloc("field").style.visibility = "hidden";	
}

Et pour l'autre partie du code, je te remercie.

J'ai vraiment du mal à percevoir ces return mais bon, je suppose que l'expérience aidera.

En fait, je ne comprends pas vraiment le code (même si je vois qu'il fonctionne).

La condition m'intrigue, si la variable "EnableFunction correspond à false" alors ... ?
Je ne comprends pas cette condition de "false".

Je suppose que le return false; veut dire qu'une fois la condition respectée, la fonction ne peut plus fonctionner ?

Pour que ton code fonctionne de manière optimale dans mon cas précis, j'ai enlevé le "EnableFunction = false;". Si je le laisse, je ne peux plus du tout réutiliser la fonction après ouverture/fermeture.

-> http://www.esb-studio.be/Gamerz/afficherBD3b.htm

Alors que je voulais ça :

-> http://www.esb-studio.be/Gamerz/afficherBD3c.htm

Mais ma demande n'était pas claire ; ).

eSb` · 13 Oct 2006

Encore une petite question. Comment valider un formulaire avec la touche Enter ?

http://www.esb-studio.be/Gamerz/afficherBD6.htm

Je voudrais qu'après avoir saisi un nombre, on puisse le valider en appuyant sur enter.
(sur google, je ne trouve que des gens qui veulent le désactiver...)

Ps: si la fin de mon code n'est pas méga propre, c'est simplement car je n'ai - au final - pas trouvé d'autre solution. ; )

eSb` · 13 Oct 2006

Encore une petite question. Comment valider un formulaire avec la touche Enter ?

http://www.esb-studio.be/Gamerz/afficherBD6.htm

Je voudrais qu'après avoir saisi un nombre, on puisse le valider en appuyant sur enter.
(sur google, je ne trouve que des gens qui veulent le désactiver...)

Ps: si la fin de mon code n'est pas méga propre, c'est simplement car je n'ai - au final - pas trouvé d'autre solution. ; )

Maleki · 15 Oct 2006

Je crois que tu devras passer par un bouton de type Submit au lieu de Button pour pouvoir valider avec Enter.
Ensuite, tu affecte à ton formulaire l'évèment onSubmit...
Il existe peut-être des alternatives mais je n'en connais pas pour l'instant !

eSb` · 15 Oct 2006

J'ai déjà essayé et je viens de le refaire, mais ça ne fonctionne toujours pas. La page se recharge simplement.

C'est pas mortel mais ça m'intrigue

.

["Problème"] Javascript

eSb`

That's Poker!

Soulsight

Elite

null

ose();

eSb`

That's Poker!

guslinux

Gamerz'ien

eSb`

That's Poker!

Calvin80

Respect is key

null

ose();

guslinux

Gamerz'ien

eSb`

That's Poker!

guslinux

Gamerz'ien

eSb`

That's Poker!

eSb`

That's Poker!

eSb`

That's Poker!

Maleki

Pain in the ass !

eSb`

That's Poker!

Autres sujets récents