Listes déroulantes créées automatiquement

**Eric_03** · 31/10/2016, 11h44

Bonjour,

voici plusieurs jours que j'essaie de trouver mon erreur sans succès.

J'arrive à créer mes listes déroulantes de manière automatique mais ensuite les autres fonctions (un reset des choix et une coloration rouge ou bleu après validation ne fonctionnent plus) merci de bien vouloir m'aiguiller. Je me suis appuyé sur le tuto de "Introduction au JavaScript de Serge P. Dans le cadre de cet exercice, je ne dois pas utiliser Jquery seulement du JavaScript.

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
 
	<head>
 
		<meta charset="utf-8" />
		<title>Quiz sur les pays</title>
		<link href="styles.css" rel="stylesheet" type="text/css"media="all">
		<script src="code.js"></script>
 
	</head>
 
	<body>
 
	<!-- Titre -->
	<div id="titre"></div>
 
	<!-- Listes déroulantes -->
	<form id="listes" name="listes">
 
		<SCRIPT>
 
		addList();
 
		</SCRIPT>
 
	</form>
 
	<!-- Carte -->
	<div id="carte"><img src="carte.png" height="328"></div>
 
	<!-- Boutons -->
	<div id="boutons">
		<input type="submit" name="boutonReset" id="boutonReset" value="Reset" onclick="fonctionReset()"/>
		<input type="submit" name="boutonValider" id="boutonValider" value="Valider" onclick="fonctionValider()"/>	
	</div>
 
	<!-- code JS -->
 
 
	</body>
 
</html>

JavaScript

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// Jeu des Pays
 
// Ecriture du titre
document.getElementById("titre").innerHTML = ' <p>Jeu des pays</p>';
 
// Tableau des pays
tableauPays = new Array();
tableauPays[1] = 'Azerbaïdjan';
tableauPays[2] = 'Turkménistan';
tableauPays[3] = 'Ouzbékistan';
tableauPays[4] = 'Afghanistan';
tableauPays[5] = 'Pakistan';
tableauPays[6] = 'Tadjikistan';
tableauPays[7] = 'Kirghizistan';
 
// Fonction Valider
function fonctionValider() {
	// boucle sur les listes
	for (var i=1; i<=7; i++)
	{
		// récupération de l'index, puis de la valeur choisie
		var indexChoisi = document.forms["listes"].elements["liste"+i].selectedIndex;
		var paysChoisi = document.forms["listes"].elements["liste"+i].options[indexChoisi].value;
 
		// teste si la liste i affiche le bon pays
		if (paysChoisi == tableauPays[i]) {
			// changement de style de l'élément numéro i
			// document.getElementById("numero"+i).style.backgroundColor='#0066CC';
			document.getElementById("numero"+i).className='OK';
		} else {
			//document.getElementById("numero"+i).style.backgroundColor='#FFFFFF';
			document.getElementById("numero"+i).className='NOK';
		}
	}
}
 
// Fonction Reset
function fonctionReset() {
	// boucle sur les listes
	for (var u=1; u<=7; u++)
	{
		 affichage première valeur
		document.forms["listes"].elements["liste"+u].selectedIndex =0;
		//document.getElementById("numero"+i).style.backgroundColor='#FFFFFF';
		document.getElementById("numero"+u).className='';
	}
}
 
	function addList()
	{
		for (var j=1; j<=7; j++)
		{
			var elTxt = new Array();
			var tabTxt = new Array(j +" - ");
 
			var elSpan = document.createElement("span");
 
			elSpan.id = "numero"+j;
 
			for (k=0; k<tabTxt.length; k++)
			{
 
			elTxt[k] = document.createTextNode(tabTxt[k]);
 
			}			
 
			var elSelect = document.createElement("select");
			elSelect.id = "listes"+j;
			elSelect.size ="1"
			new Option("Text","Value","defaultSelected true / false", "selected true /false");
			var elOption = new Array(
				                          new Option("Choisir...","",false,false),
				                          new Option("Afghanistan","Afghanistan",false,false),
				                          new Option("Azerbaïdjan","Azerbaïdjan",false,false),
				                          new Option("Kirghizistan","Kirghizistan",false,false),
				                          new Option("Pakistan","Pakistan",false,false),
				                          new Option("Tadjikistan","Tadjikistan",false,false),
				                          new Option("Turkménistan","Turkménistan",false,false),
				                          new Option("Turkménistan","Turkménistan",false,false)
				                          );
			var elForm = document.getElementById("listes");
			var objBouton = document.getElementById("idBouton");
 
			elForm.insertBefore(elTxt[0], objBouton);		
			elForm.insertBefore(elSelect, objBouton);
 
			for (i=0;i<elOption.length;i++)
			{
				elSelect.options.add(elOption[i]);
 
			}
			elForm.insertBefore(document.createElement("br"), objBouton);
		}
	}

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
28
29
body {
	font-family: Verdana,Arial,Sans;
	font-size: 13px;
	background: #CCCCCC;
}
 
#titre{
	font-size: 16px;
}
 
#listes{
	display:inline-block;
}
 
#carte{
	display: inline-block;
}
 
#boutons{
	margin-top: 30px;
}
 
.OK {
	background: blue;
}
 
.NOK{
	background: red;
}

Merci
Eric

**eleydet** · 31/10/2016, 12h03

Bonjour,

Votre code en JavaScript placé au milieu du code en HTML, cela rend la lecture difficile. Pourriez-vous placer votre code en JavaScript soit entre les balise <head> et </head>, soit juste avant la balise </body>?

Un conseil : Remplacez <SCRIPT LANGUAGE = "JAVASCRIPT"> (démodé) par <SCRIPT>.

**Eric_03** · 02/11/2016, 19h50

Solution peut être pas très lisible

mais fonctionne chez moi

jeu.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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
 
	<head>
 
		<meta charset="utf-8" />
		<title>Quiz sur les pays</title>
		<link href="styles.css" rel="stylesheet" type="text/css" media="all">
 
 
	</head>
 
	<body>
 
		<!-- Titre -->
		<div id="titre"></div>
 
		<script src="code.js"></script>
 
		<!-- Listes déroulantes -->
		<form id="listes" name="listes">
 
			<span id="numero"></span>
 
			<script>
                        
                                addList();
                                        
                        </script> 
 
 
		</form>
 
		<!-- Carte -->
		<div id="carte"><img src="carte.png"></div>
 
		<!-- Boutons -->
		<div id="boutons">
 
			<input type="submit" name="boutonReset" id="boutonReset" value="Reset" onclick="fonctionReset()"/>
			<input type="submit" name="boutonValider" id="boutonValider" value="Valider" onclick="fonctionValider()"/>	
 
		</div>
 
	</body>
 
</html>

code.js

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
window.onload = function(){
// Jeu des Pays
 
// Ecriture du titre
document.getElementById("titre").innerHTML = ' <p>Jeu des pays</p>';
 
// Tableau des pays
tableauPays = new Array();
tableauPays[1] = 'Azerbaïdjan';
tableauPays[2] = 'Turkménistan';
tableauPays[3] = 'Ouzbékistan';
tableauPays[4] = 'Afghanistan';
tableauPays[5] = 'Pakistan';
tableauPays[6] = 'Tadjikistan';
tableauPays[7] = 'Kirghizistan';
}
 
 
// Fonction Valider
function fonctionValider() {
	// boucle sur les listes
	for (var i=1; i<=7; i++)
	{
		// récupération de l'index, puis de la valeur choisie
		var indexChoisi = document.forms["listes"].elements["liste"+i].selectedIndex;
		var paysChoisi = document.forms["listes"].elements["liste"+i].options[indexChoisi].value;
 
		// teste si la liste i affiche le bon pays
		if (paysChoisi == tableauPays[i]) {
			// changement de style de l'élément numéro i
			// document.getElementById("numero"+i).style.backgroundColor='#0066CC';
			document.getElementById("numero"+i).className='OK';
		} else {
			//document.getElementById("numero"+i).style.backgroundColor='#FFFFFF';
			document.getElementById("numero"+i).className='NOK';
		}
	}
}
 
// Fonction Reset
function fonctionReset() {
	// boucle sur les listes
	for (var u=1; u<=7; u++)
	{
		 //affichage première valeur
		document.forms["listes"].elements["liste"+u].selectedIndex =0;
		//document.getElementById("numero"+i).style.backgroundColor='#FFFFFF';
		document.getElementById("numero"+u).className='';
	}
}
 
function addList()
	{
		for (var j=1; j<=7; j++)
		{
 
			// crée un nouveau nœud d'élément <span> vide
			// sans aucun ID, attribut ou contenu  
			var elSpan = document.createElement("span");
 
 
			// lui donne un attribut id appelé 'numeroX'
			elSpan.setAttribute("id", "numero"+j); 
 
			// crée un peu de contenu pour cet élément.
			var elSpan_content = document.createTextNode(j + " - ");
 
			// ajoute ce contenu au nouvel élément
			elSpan.appendChild(elSpan_content);
 
			// Obtient une référence de l'élément devant lequel on veut insérer notre nouveau span
			var sp2 = document.getElementById("numero");
 
			// Obtient une référence du nœud parent
			var parentDiv = sp2.parentNode;
 
 
			// Création de la liste déroulante
			// sans aucun ID, attribut ou contenu 
			var elSelect = document.createElement("select");
 
			// On lui donne un attribut id appelé 'listesX'
			elSelect.setAttribute("id", "liste"+j);
 
			// Nombre d'éléments visible			
			elSelect.size ="1";
 
 
			// Création des options de la liste déroulante
			new Option("Text","Value","defaultSelected true / false", "selected true /false");
			var elOption = new Array(
				                          new Option("Choisir...","",false,false),
				                          new Option("Afghanistan","Afghanistan",false,false),
				                          new Option("Azerbaïdjan","Azerbaïdjan",false,false),
				                          new Option("Kirghizistan","Kirghizistan",false,false),
				                          new Option("Pakistan","Pakistan",false,false),
				                          new Option("Tadjikistan","Tadjikistan",false,false),
				                          new Option("Turkménistan","Turkménistan",false,false),
				                          new Option("Ouzbékistan","Ouzbékistan",false,false)
				                          );
 
 
			// Obtient une référence de l'élément devant lequel on veut insérer notre liste			
			var elForm = document.getElementById("listes");
			var objBouton = document.getElementById("boutons");
 
 
			// insère le nouvel élément dans le DOM avant sp2
			parentDiv.insertBefore(elSpan, objBouton);			  
 
			// insère le nouvel élément dans le DOM
			elForm.insertBefore(elSelect, objBouton);
 
			// Ajout dans le select des options
			for (t=0;t<elOption.length;t++)
			{
				elSelect.options.add(elOption[t]);
			}
 
			elForm.insertBefore(document.createElement("br"), objBouton);			 
 
			elForm.insertBefore(document.createElement("br"), objBouton);
 
 
 
 
		}
	}

styles.css

Code css :

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
28
body {
	font-family: Verdana,Arial,Sans;
	font-size: 13px;
	background: #CCCCCC;
}
#titre{
	font-size: 16px;
}
 
#listes{
	display:inline-block;
}
 
#carte{
	display: inline-block;
}
 
#boutons{
	margin-top: 30px;
}
 
.OK {
	background: blue;
}
 
.NOK{
	background: red;
}

Eric

**eleydet** · 03/11/2016, 09h24

Bonjour,

Voici quelques améliorations possibles, mais j'avoue que je pinaille :

La ligne <script src="code.js"></script> était mieux placée entre les balises <head> et </head>.
Du code xhtml ne devrait pas être mélangé à du code html : Lignes 6, 34 et 35.
Quelques autres petites corrections...

Ce qui donne :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
 
	<head>
 
		<meta charset="utf-8">
		<title>Quiz sur les pays</title>
		<link href="styles.css" rel="stylesheet" media="all">
		<script src="code.js"></script>
 
	</head>
 
	<body>
 
	<!-- Titre -->
	<div id="titre"></div>
 
	<!-- Listes déroulantes -->
	<form id="listes" name="listes">
 
		<script>
 
                addList();
 
                </script>
 
	</form>
 
	<!-- Carte -->
	<div id="carte"><img src="carte.png" height="328"></div>
 
	<!-- Boutons -->
	<div id="boutons">
		<input type="submit" name="boutonReset" id="boutonReset" value="Reset" onclick="fonctionReset();">
		<input type="submit" name="boutonValider" id="boutonValider" value="Valider" onclick="fonctionValider();">	
	</div>
 
	<!-- code JS -->
 
 
	</body>
 
</html>

**Eric_03** · 03/11/2016, 12h48

Bonjour,

Quand je mets La ligne <script src="code.js"></script> dans le head.

Le titre n'apparaît plus, c'est pourquoi je le place à cet endroit

Merci
Eric

**eleydet** · 03/11/2016, 21h13

Bonsoir,

Quand je mets La ligne <script src="code.js"></script> dans le head.
Le titre n'apparaît plus, ...

C'est étonnant et absolument pas normal. Pour ma part, le titre s'affiche correctement, quand la ligne <script src="code.js"></script> est dans le head.

Listes déroulantes créées automatiquement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager