["Problème"] Javascript

Discussion dans 'Web, design' créé par eSb`, 8 Octobre 2006.

Statut de la discussion:
Fermée.
  1. Offline
    eSb` That's Poker!
    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 :proud:
    eSb`, 8 Octobre 2006
    #1
  2. Offline
    Soulsight Touriste
    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 :)
    Soulsight, 8 Octobre 2006
    #2
  3. Offline
    null ose();
    C'est normal, tu utilises :

    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 :



    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 + "&nbsp;" + 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 :

    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
    null, 8 Octobre 2006
    #3
  4. Offline
    eSb` That's Poker!
    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
    eSb`, 9 Octobre 2006
    #4
  5. Offline
    guslinux Gamerz'ien
    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.
    guslinux, 9 Octobre 2006
    #5
  6. Offline
    eSb` That's Poker!
    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 .... ?
    eSb`, 9 Octobre 2006
    #6
  7. Offline
    Calvin80 Elite
    ...alors retourne rien.
    Calvin80, 9 Octobre 2006
    #7
  8. Offline
    null ose();
    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 :p
    null, 9 Octobre 2006
    #8
  9. Offline
    guslinux Gamerz'ien
    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 ;)
    guslinux, 9 Octobre 2006
    #9
  10. Offline
    eSb` That's Poker!
    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 ; ).
    eSb`, 10 Octobre 2006
    #10
  11. Offline
    guslinux Gamerz'ien
    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";
    	}
    }
    guslinux, 10 Octobre 2006
    #11
  12. Offline
    eSb` That's Poker!
    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`, 10 Octobre 2006
    #12
  13. Offline
    eSb` That's Poker!
    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 Octobre 2006
    #13
  14. Offline
    eSb` That's Poker!
    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 Octobre 2006
    #14
  15. Offline
    Maleki Pain in the ass !
    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 ! :p
    Maleki, 15 Octobre 2006
    #15
  16. Offline
    eSb` That's Poker!
    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 ;).
    eSb`, 15 Octobre 2006
    #16
Statut de la discussion:
Fermée.