Saisie dans zone de texte et affichage sur la page

**goofyto8** · 15/06/2016, 17h47

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

**danielhagnoul** · 15/06/2016, 20h51

Corrections (voir codes).

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
<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 javascript :

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

**goofyto8** · 16/06/2016, 09h49

Merci.

Saisie dans zone de texte et affichage sur la page

JavaScript

Discussions similaires

Partager

Partager