Javascript - Liste déroulante dynamique en Javascript

netixel · 22 Octobre 2014

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 !

baud74 · 22 Octobre 2014

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.

netixel · 22 Octobre 2014

baud74 a dit:
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.

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...

baud74 · 22 Octobre 2014

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

netixel · 22 Octobre 2014

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

baud74 · 22 Octobre 2014

en initialisant la varible html avant le 1er += (plus prudent et propre) et en faisant en sorte que la fonction retourne une valeur.

netixel · 22 Octobre 2014

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 ?

netixel · 22 Octobre 2014

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é ?

baud74 · 22 Octobre 2014

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.

netixel · 22 Octobre 2014

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

netixel · 22 Octobre 2014

:resolu:

florenceHTML · 26 Octobre 2014

bonsoir,
c'est urgent
je n'arrive pas a enlever undefined.

spout · 27 Octobre 2014

C'est pas bien le kidnapping de undefined.