Bonjour,

La routine javascript suivante extraite du livre de Minnick et Holland "Programmez en JS en s'amusant" fonctionne de manière insatisfaisante
Navigateur Firefox 45.0.1
Pourriez vous me dépanner ?

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Composer une liste en javascript</TITLE>
<META NAME="author" content="Minnick and Holland">
<STYLE type="text/css">@import url(style.css);</STYLE>
 
</HEAD>
<BODY>
<div id="pageListe">
<H1> Faire une liste</H1>
<div id="zoneformulaire">
<label> Voici mon choix :
<input type="text" id="jeVeux" />
</label>
<!-- bouton d'ajout -->
<button type="button" id ="btnAjoute"> AJOUTER</button>
<br /> <br />
<button type="button" id ="btnAffiche"> AFFICHAGE</button>
</div>
<ul id="uListe"></ul>
</div>
<script type='text/javascript' language="javascript" src="routine.js">
</script>
</BODY>
</HTML>

Fichier 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
body {
font-family :Arial,sans-serif;
}
 
#pageListe.classAff {
background-color:#FAF2AD;
padding:20px;
font-family: cursive;
}
 
#pageListe.classAff ul {
margin: 10px 0px ;
padding: 0px ;
border-left:4px double red ;
}
 
#pageListe.classAff li {
list-style-type:none;
margin: 0px -20px;
padding-left: 26px;
border-bottom: 1px solid blue;
line-height: 36px;
font-size: 24px;
font-family:cursive;

la routine javascript (fichier routine.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
// Auditeur d'évènement pour le bouton ajouter
var vBtnAj=document.getElementById("btnAjoute");
vBtnAj.addEventListener("click",recupererDesir);
 
//Auditeur d'évènement pour le bouton afficher
var vBtnAff=document.getElementById("btnAffiche");
vBtnAff.addEventListener("click",afficherListe);
 
// creation tableau
var maListe=[];
 
 
//  variable maZoneListe
var maZoneListe=document.getElementById("uListe");
 
 
 
function recupererDesir() {
var vDesir=document.getElementById("jeVeux");
insererDansListe(vDesir);
viderChamp(vDesir);
}
 
function insererDansListe(nouvDesir) {
maListe.push(nouvDesir.value);
var nouvEntree=document.createElement("li");
nouvEntree.innerHTML=maListe[maListe.length-1];
maZoneListe.appendChild(nouvEntree);
 
}
// affichage de la liste
function afficherListe() {
var vPL=document.getElementById("pageListe");
var vZF= document.getElementById("zoneFormulaire");
vZF.style.display="none";
vPL.className="classAff";
maZoneListe.innerHTML="";
maListe.sort();
for(var i=0; i<maListe.lenght;i++) {
uListe.innerHTML += "<li>" + maListe[i] + "</li>";
}
}
 
// effacement de ce qui a été saisi
function viderChamp(idChamp) {
idChamp.value="";
}