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:
    586
    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:
    586
    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:
    586
    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:
    586
    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:
    8 882
    J'aime reçus:
    263
    C'est pas bien le kidnapping de undefined.
     
Chargement...
Similar Threads - Javascript Liste déroulante Forum Date
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
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Format milliers nombre en javascript Développement d'un site Web ou d'une appli mobile 5 Décembre 2019
Référencement d'un site full javascript (angular js) Référencement Google 10 Septembre 2019
Compatibilité Javascript pour IE. Demandes d'avis et de conseils sur vos sites 21 Avril 2019
Librairie javascript PerformanceNavigationTiming Développement d'un site Web ou d'une appli mobile 7 Avril 2019
Site totalement javascript : pas bon pour le SEO ? Débuter en référencement 8 Novembre 2018
Quelle origine connexion http en javascript ? Développement d'un site Web ou d'une appli mobile 11 Juillet 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice