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 sources 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 pour ceux qui ne veulent pas télécharger mes fichiers :
HTML
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 <!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
CSS
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 // 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
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 body {font-family:Verdana,Arial,Sans; font-size:13px; background:#CCCCCC;} #listederoul {display:inline-block;}
Merci par avance pour votre aide !
Partager