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