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