Javascript - Liste déroulante dynamique en Javascript

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par netixel, 22 Octobre 2014.

  1. netixel
    netixel Nouveau WRInaute
    Inscrit:
    3 Juin 2014
    Messages:
    7
    J'aime reçus:
    0
    Bonjour à tous,

    Je précise que je débute en javascript. :)

    Mon petit projet

    J'ai créé une fonction associée à un tableau qui créé des listes déroulantes dynamiquement
    en fonction des entrées dans mon tableau. Par exemple si j'ajoute une entrée à mon tableau, ma fonction créera une nouvelle liste déroulante automatiquement.

    Problème rencontré

    Le souci, c'est qu'à l'affichage, j'ai un "Undefined" qui s'affiche suivi de mes listes déroulantes et je pense qu'il me manque encore des notions de syntaxe pour supprimer le "Undefined".

    Code source du projet

    Je joint à ce topic mes 3 fichiers (jeux_pays.html - code.js - styles.css) comme cela vous verrez le résultat par vous même et vous trouverez ce qui pose problème.


    J'affiche ci-dessous mon code source comme cela vous verrez le résultat par vous même et vous trouverez ce qui pose problème.

    HTML index.html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" media="screen" href="styles.css" type="text/css"/>
    </head>
    <body>
    
    <!-- Listes déroulantes -->
    <div id="listederoul"></div>
    
    
    <!-- code JS -->
    <script src="code.js"></script>
    
    </body>
    </html>
    JAVASCRIPT code.js

    Code:
    // Création du tableau contenu dans chaque listes déroulantes
    listePays = new Array();
    listePays[0] = "Italie";
    listePays[1] = "Portugal";
    listePays[2] = "France";
    listePays[3] = "Brésil";
    listePays[4] = "Espagne";
    listePays[5] = "Allemagne";
    listePays[6] = "Angleterre";
    
    // Fonction permettant la création dynamique des listes déroulantes
    function mesListes(){
    	var i, j;
    	document.write("<form id=\"listes\" name=\"listes\">");
    // début création dynamique des listes déroulantes
    	for (i=1; i<=listePays.length; i++){
    		document.write("<span id=\"numero"+i+"\">"+i+"</span> - <select name=\"liste"+i+"\"><option value=\"\">Choisir...</option>");
    // début création du contenu des listes dynamiques en fonction du tableau listePays
    		for (j=0; j<listePays.length; j++){
    			document.write("<option value=\""+listePays[j]+"\">"+listePays[j]+"</option>");}
    // fin création du contenu des listes dynamiques en fonction du tableau listePays
    		document.write("</select><br>");
    	}
    	document.write("</form>");
    }
    document.getElementById("listederoul").innerHTML = mesListes();
    // fin création dynamique des listes déroulantes
    CSS styles.css

    Code:
    body {font-family:Verdana,Arial,Sans; font-size:13px; background:#CCCCCC;}
    
    #listederoul {display:inline-block;}


    Merci par avance pour votre aide !
     
  2. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    580
    J'aime reçus:
    0
    document.getElementById("listederoul").innerHTML = mesListes();

    on change le contenu du div listederoul pour la valeur retournée par mesListes()
    or mesListes() ne retourne pas de valeur d'où le undefined

    ce qui fonctionnera, c'est
    <div id="listederoul">
    <script type="text/javascript">
    .....
    mesListes();
    </script>
    </div>

    ou si l'on préfére
    document.getElementById("listederoul").innerHTML = mesListes();
    il faut changer la fonction mesListes pour quelle retourne une valeur plutôt que d'écrire dans le document.
     
  3. netixel
    netixel Nouveau WRInaute
    Inscrit:
    3 Juin 2014
    Messages:
    7
    J'aime reçus:
    0
    Déjà merci pour ta réponse. Après je me doutais bien qu'il fallait retourner une valeur de ma fonction mais c'est là que je bloque. Si ma fonction retournerait un résultat du style :
    Code:
    var resultat = a+b;
    il n'y aurait pas de soucis, j'écrirais à la fin de la fonction :
    Code:
    return resultat;
    Sauf que dans ma fonction j'ai des balises html, j'ai des boucles et tout ça je ne peux pas l'écrire dans une variable...
     
  4. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    580
    J'aime reçus:
    0
    donc tu fais comme je l'ai proposé.

    et si tu prends l'autre option qui est de retourner une valeur, tu remplaces
    document.write("<span id=\"numero"+i+"\">"+i+"</span> - <select name=\"liste"+i+"\"><option value=\"\">Choisir...</option>");
    par
    html += "<span id=\"numero"+i+"\">"+i+"</span> - <select name=\"liste"+i+"\"><option value=\"\">Choisir...</option>");

    et tu as bien le html voulu dans la variable html
     
  5. netixel
    netixel Nouveau WRInaute
    Inscrit:
    3 Juin 2014
    Messages:
    7
    J'aime reçus:
    0
    si je comprends bien, je déclare dans ma fonction une variable du style : var html;
    ensuite je remplace les document.write("<span ...>") par html += "<span...> " ?

    Est-ce bien cela ? :

    Code:
    
    function mesListes(){
    	var i, j, html;
    	// document.write("<form id=\"listes\" name=\"listes\">");
            html += "<form id=\"listes\" name=\"listes\">";
    	for (i=1; i<=listePays.length; i++){
    		// document.write("<span id=\"numero"+i+"\">"+i+"</span> - <select name=\"liste"+i+"\"><option value=\"\">Choisir...</option>");
                    html += "<span id=\"numero"+i+"\">"+i+"</span> - <select name=\"liste"+i+"\"><option value=\"\">Choisir...</option>";
    		for (j=0; j<listePays.length; j++){
    			// document.write("<option value=\""+listePays[j]+"\">"+listePays[j]+"</option>");}
                            html += "<option value=\""+listePays[j]+"\">"+listePays[j]+"</option>";}
    		// document.write("</select><br>");
                    html += "</select><br>";
    	}
    	// document.write("</form>");
            html +="</form>";
    }
    document.getElementById("listederoul").innerHTML = mesListes();
    // fin création dynamique des listes déroulantes
    
     
  6. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    580
    J'aime reçus:
    0
    en initialisant la varible html avant le 1er += (plus prudent et propre) et en faisant en sorte que la fonction retourne une valeur.
     
  7. netixel
    netixel Nouveau WRInaute
    Inscrit:
    3 Juin 2014
    Messages:
    7
    J'aime reçus:
    0
    oups dans mon code, j'ai mis "html += ..." alors que j'aurais du commencer par "html =..." puis ensuite faire "html += ..." pour ajouter du contenu à la suite dans ma variable, c'est bien cela ?
     
  8. netixel
    netixel Nouveau WRInaute
    Inscrit:
    3 Juin 2014
    Messages:
    7
    J'aime reçus:
    0
    c'est bon tout fonctionne nikel :) merci Baud74

    j'ai initialisé ma varialbe html en faisant : html = "";
    ensuite à chaque fois que c'était nécessaire je faisais : html += "contenu html";

    il me manquait cette petite notion : += qui est bien pratique :)

    après j'aimerais bien utiliser window.onload mais ça c'est peut-être plus compliqué ?
     
  9. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    580
    J'aime reçus:
    0
    ce serait utile si la ligne
    document.getElementById("listederoul").innerHTML = mesListes();
    n'était pas dans le fichier js
    vu qu'elle y est, c'est inutile.
     
  10. netixel
    netixel Nouveau WRInaute
    Inscrit:
    3 Juin 2014
    Messages:
    7
    J'aime reçus:
    0
    Ok, bon ça ira bien comme ça pour commencer, chaque chose en son temps.

    Maintenant, je vais créer une fonction javascript associée à un bouton "valider" pour vérifier si les réponses choisies dans mes listes déroulantes sont correct ou non, ce sera une sorte de quiz au final.

    En tout cas merci encore pour ton aide
     
  11. netixel
    netixel Nouveau WRInaute
    Inscrit:
    3 Juin 2014
    Messages:
    7
    J'aime reçus:
    0
  12. florenceHTML
    florenceHTML Nouveau WRInaute
    Inscrit:
    26 Octobre 2014
    Messages:
    1
    J'aime reçus:
    0
    bonsoir,
    c'est urgent
    je n'arrive pas a enlever undefined.
     
  13. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 169
    J'aime reçus:
    345
    C'est pas bien le kidnapping de undefined.
     
Chargement...
Similar Threads - Javascript Liste déroulante Forum Date
Javascript : Lier plusieurs listes déroulantes Développement d'un site Web ou d'une appli mobile 24 Avril 2006
Class.Name Javascript sur liste dynamique? Développement d'un site Web ou d'une appli mobile 12 Décembre 2011
Prise en compte de mots contenus dans du javascript et affichés en listes Référencement Google 22 Janvier 2010
Javascript et évènements (EVENT / addEventListener) ? Développement d'un site Web ou d'une appli mobile 15 Juillet 2009
Pages dynamiques avec Javascript ? Développement d'un site Web ou d'une appli mobile 14 Juillet 2022
[JavaScript Array] modifier un code html sans le supprimer/recréer Développement d'un site Web ou d'une appli mobile 20 Juin 2022
Le javascript protège-t-il du copiage HTML ? Développement d'un site Web ou d'une appli mobile 9 Mai 2022
Tester une URL avec Javascript Développement d'un site Web ou d'une appli mobile 25 Février 2022
jour en javascript Développement d'un site Web ou d'une appli mobile 24 Février 2022
référencement site full javascript Débuter en référencement 17 Janvier 2022
Javascript et preloader Référencement Google 16 Septembre 2021
Javascript API cache query non url ? Développement d'un site Web ou d'une appli mobile 18 Août 2021
Comment lancer du Javascript sans html ? Développement d'un site Web ou d'une appli mobile 28 Avril 2021
Pop up javascript + cookie Développement d'un site Web ou d'une appli mobile 3 Février 2021
Du php dans du javascript Développement d'un site Web ou d'une appli mobile 16 Novembre 2020
Editer document Word avec Javascript Développement d'un site Web ou d'une appli mobile 10 Septembre 2020
Quelle extension Chrome pour expander les liens Javascript Développement d'un site Web ou d'une appli mobile 30 Août 2020
Javascript et duplication de Hn Problèmes de référencement spécifiques à vos sites 21 Août 2020
Quels Outils Javascript pour générer des documents Demandes d'avis et de conseils sur vos sites 21 Juillet 2020
HTML fait par Javascript <=>gérer les Events ? Développement d'un site Web ou d'une appli mobile 5 Juillet 2020