Discussion :

[yamishibai]

bonjour je suis en javascript et je suis bloquer sur un truc je vous montre mon code, vous voyez this.supp dans le constructor juste la ligne en dessous vous voyez que j'ai caché son affichage plus loin dans le code vous verrez que je l'ai rendu visible au click et le truc c'est que j'aimerais conserver l'affichage du click et je vois pas trop comment faire soit le localeStorage mais je vois pas trop faire puisqu'il le considère comme un événement ou les condition mais je vois pas trop comment faire alors avez vous des astuces pour conserver l'affichage générer par un click merci bonne journée à vous

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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
class Booking {
    constructor(save, read, clear, element, map) {
        this.save = save;
        this.read = read;
        this.clear = clear;
        this.element = element;
        this.map = map;
        this.supp=document.getElementById("supp");
        this.supp.style.visibility="hidden";
        this.annule();
        this.stockSession();
        this.stockLocal();
        this.cancelForm();
        this.cancelSign();
        this.hideCanvas();
        this.showCanvas();
    }
 
    stockSession() {
 
        // Manage Save event
        this.save.addEventListener("click", function (e) {
            window.sessionStorage["stockage"] = document.getElementById("prenom").value + " " + document.getElementById("nom").value + " a réservé pour la station " + this.map.currentStation.name + " à cette adresse " + this.map.currentStation.address;
            window.sessionStorage["station"] = this.map.currentStation.available_bikes - 1;
            window.sessionStorage["button"] =this.supp.style.visibility="visible";
        }.bind(this), true);
 
        // Manage Read Event
        this.read.addEventListener("click", function (e) {
            document.querySelector(".result").innerHTML = window.sessionStorage["stockage"];
            document.querySelector(".place").innerHTML = "vélo disponible : " + window.sessionStorage["station"];
            this.supp = window.sessionStorage["button"];
        }, true);
 
 
        // Manage clear event
        this.clear.addEventListener("click", function (e) {
            document.querySelector(".result").innerHTML = "";
        }, true);
 
    }
 
    stockLocal() {
        this.element.style.width = "50%";
        this.element.innerHTML = localStorage.getItem("contenu");
        this.save.addEventListener("click", function (e) {
            localStorage.setItem("contenu", document.getElementById("prenom").value + " " + document.getElementById("nom").value + " a réservé pour la station " + " " + this.map.currentStation.name + " à cette adresse " + this.map.currentStation.address)
            }.bind(this), false);
 
 
 
        // Attache une fonction à l'évènement "click" du bouton "Effacer" pour effacer le 
        // contenu et la sauvegarde.
        this.clear.addEventListener("click", function () {
            document.getElementById("nom").value = "";
            document.getElementById("prenom").value = "";
            localStorage.removeItem("contenu");
        }, false);
 
        document.getElementById("supp").addEventListener("click", function () {
            document.getElementById("nom").value = "";
            document.getElementById("prenom").value = "";
            localStorage.removeItem("contenu");
        }, false);
 
    }
 
    videForm(e) {
        document.querySelector(".name").innerHTML = "";
        document.querySelector(".adresse").innerHTML = "";
        document.querySelector(".lieu").innerHTML = "";
        document.querySelector(".place").innerHTML = "";
        document.querySelector(".dispo").innerHTML = "";
        document.getElementById("nom").value = "";
        document.getElementById("prenom").value = "";
    }
 
    cancelForm() {
        $("#cancel").click(function (e) {
            // Clear form:
            this.videForm();
 
            e.preventDefault();
        }.bind(this))
    }
 
 
    cancelSign() {
        $("#reset").click(function (e) {
            // Clear canvas :
            this.videForm();
            this.hideCanvas();
            e.preventDefault();
 
        }.bind(this))
    }
 
    annule() {
        this.supp.addEventListener("click", function () {
            this.videForm();
            localStorage.removeItem("contenu");
            document.querySelector(".result").innerHTML = "";
            this.supp.style.visibility="hidden";
        }.bind(this), false);
    }
    hideCanvas() {
        document.getElementById("sign").style.display = 'none';
        document.getElementById("reserver").style.display = 'none';
        document.getElementById("reset").style.display = 'none';
    }
 
    showCanvas() {
        $("#ok").click(function (e) {
            document.getElementById("sign").style.display = 'block';
            document.getElementById("reserver").style.display = 'block';
            document.getElementById("reset").style.display = 'block';
            e.preventDefault()
 
        }.bind(this))
    }
}

[Loralina]

Bonjour,
Deux retouches à la fonction de lecture :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
        this.read.addEventListener("click", function (e) {
            document.querySelector(".result").innerHTML = window.sessionStorage["stockage"];
            document.querySelector(".place").innerHTML = "vélo disponible : " + window.sessionStorage["station"];
            this.supp.style.visibility = window.sessionStorage["button"]; //ajout : .style.visibility
        }.bind(this), true); //ajout : .bind(this)

Conserver l'affichage de mon bouton après un rechargement

A la fin de la fonction constructor, on peut ajouter this.read.click();, mais, de mon point de vue, il serait préférable d'avoir une méthode de lecture qu'on appelle à l'initialisation et non une fonction anonyme dont l'exécution dépend d'un événement.

[yamishibai]

merci pour ta réponse mais on m'a expliqué qu'il fallait que je choisisse le moment où mon bouton allais disparaitre en faite pas besoin du sessionStorage merci encore

mais ça je le cherche encore