Débuggage TypeError: document.forms.listes.elements[("liste" + i)] is undefined code.js:22

**stephane2601** · 12/10/2015, 12h34

voila je ne vois pas ce qui cloche dans le code que j'ai recopié :

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
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
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Quiz sur les pays</title>
        <link rel="stylesheet" media="screen" type="text/css" href="styles.css" type="text/css">
    </head>
    <body>
        <!-- titre -->
        <div id="titre"></div>
 
        <!-- liste déroulante -->
        <form id="listes" name="listes">
            <span id="numero1">1</span>
            <select name"liste1">
                <option value=""></option>
                <option value="Afghanistan">Afghanistant</option>
                <option value="Azerbaïdjan">Azerbaïdjan</option>
                <option value="kirghizistan">Kirghizistan</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Tadjikistan">Tadjikistan</option>
                <option value="Turkménistan">Turkménistan</option>
                <option value="Ouzbékistan">Ouzbékistan</option>
            </select><br />
            <span id="numero2">2</span>
            <select name"liste2">
                <option value=""></option>
                <option value="Afghanistan">Afghanistant</option>
                <option value="Azerbaïdjan">Azerbaïdjan</option>
                <option value="kirghizistan">Kirghizistan</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Tadjikistan">Tadjikistan</option>
                <option value="Turkménistan">Turkménistan</option>
                <option value="Ouzbékistan">Ouzbékistan</option>
            </select><br />
            <span id="numero3">3</span>
            <select name"liste3">
                <option value=""></option>
                <option value="Afghanistan">Afghanistant</option>
                <option value="Azerbaïdjan">Azerbaïdjan</option>
                <option value="kirghizistan">Kirghizistan</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Tadjikistan">Tadjikistan</option>
                <option value="Turkménistan">Turkménistan</option>
                <option value="Ouzbékistan">Ouzbékistan</option>
            </select><br />
            <span id="numero4">4</span>
            <select name"liste4">
                <option value=""></option>
                <option value="Afghanistan">Afghanistant</option>
                <option value="Azerbaïdjan">Azerbaïdjan</option>
                <option value="kirghizistan">Kirghizistan</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Tadjikistan">Tadjikistan</option>
                <option value="Turkménistan">Turkménistan</option>
                <option value="Ouzbékistan">Ouzbékistan</option>
            </select><br />
            <span id="numero5">5</span>
            <select name"liste5">
                <option value=""></option>
                <option value="Afghanistan">Afghanistant</option>
                <option value="Azerbaïdjan">Azerbaïdjan</option>
                <option value="kirghizistan">Kirghizistan</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Tadjikistan">Tadjikistan</option>
                <option value="Turkménistan">Turkménistan</option>
                <option value="Ouzbékistan">Ouzbékistan</option>
            </select><br />
            <span id="numero6">6</span>
            <select name"liste6">
                <option value=""></option>
                <option value="Afghanistan">Afghanistant</option>
                <option value="Azerbaïdjan">Azerbaïdjan</option>
                <option value="kirghizistan">Kirghizistan</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Tadjikistan">Tadjikistan</option>
                <option value="Turkménistan">Turkménistan</option>
                <option value="Ouzbékistan">Ouzbékistan</option>
            </select><br />
            <span id="numero7">7</span>
            <select name"liste7">
                <option value=""></option>
                <option value="Afghanistan">Afghanistant</option>
                <option value="Azerbaïdjan">Azerbaïdjan</option>
                <option value="kirghizistan">Kirghizistan</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Tadjikistan">Tadjikistan</option>
                <option value="Turkménistan">Turkménistan</option>
                <option value="Ouzbékistan">Ouzbékistan</option>
            </select><br />
        </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 -->
        <script src="code.js"></script>
 
    </body>
</html>

et mon 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
// jeu des Pays
 
//Ecriture du titre
document.getElementById("titre").innerHTML = '<p>Jeu des pays-stan</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 affice le bon pays
        if(paysChoisi == tableauPays[i]){
            //changement de style de l'element numéro i
            document.getElementById("numero"+i).style.backgroundColor='#0066CC';
        } else {
            document.getElementById("numero"+i).style.backgroundColor='#FFFFFF';
        }
    }
}
 
// fonction Reset
function fonctionReset(){
    //boucle sur listes
    for (var i = 1; i <= 7; i++) {
        // affichage première valeur
        document.forms["listes"].elements["liste"+i].selectedIndex = 0;
        document.getElementById("numero"+i).style.backgroundColor='#FFFFFF';
    }
}

et comme erreur :

sous FF :

TypeError: document.forms.listes.elements[("liste" + i)] is undefined code.js:21

TypeError: document.forms.listes.elements[("liste" + i)] is undefined code.js:38

et sous chrome :

Uncaught TypeError: object is not a function code.js:21

fonctionValider code.js:21

onclick jeu_pays.html:100

Uncaught TypeError: object is not a function code.js:38

fonctionValider code.js:38

onclick jeu_pays.html:98

chose qui est embêtant vu que je dois faire à partir de ce code mon exercice .... :-°