Saisie dans zone de texte et affichage sur la page

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:

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:

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:

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="";
}

Corrections (voir codes).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="pageListe">
  <h1> Faire une liste</h1>
 
  <div id="zoneFormulaire"> <!-- au lieu de 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>

Code:

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
// 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();
 
  var uListe = document.getElementById( "uListe"); // uListe !!!
 
  for ( var i = 0; i < maListe.length; i++ ){ // length !!! pas lenght
    uListe.innerHTML += '<li>' + maListe[i] + '</li>';
  }
}
 
// effacement de ce qui a été saisi
function viderChamp(idChamp) {
  idChamp.value="";
}

Merci. :coucou: