Changer BackgroungColor a l'aide d'un objet

**MI7QC** · 19/05/2020, 02h01

Bonjours a vous

je fais fasse a un probleme que je ne comprends pas...

j'ai créé un objet dans mon fichier panel.js celui-ci comprend un constructeur en paramètre la valeur color et j'ai un setteur pour attribuer une valeur de mon choix via la console(ici il est question de rentré une couleur).

donc dans la console quand je rentre ceci pan.bckcolor = "red" et bien celui-ci a une valeur de red puis je peux changer la valeur comme je veux via la console sans aucun probleme mais dans mon fichier main.js les deux dernière ligne j'ai fais des test pour changer le backgroundColor et quand je tape ceci

Code javaScript :

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

 document.getElementById('hote_panel').style.backgroundColor = pan.bckcolor;

l'objet pan.bckcolor a aucune valeur mais pourquoi? c'est ce que je ne comprend pas parce que via la console quand je lui attribue une valeur a bckcolor elle est bien pressente...

panel.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
27
28
29
30
31
 
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Panel escamotable</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 
<style>
    #hote_panel {
        background-color: blue;
    }
</style>
 
<body>
    <div id="hote_panel" class=" w3-sidebar w3-bar-block  w3-animate-left" style="display:none">
        <button class="w3-bar-item w3-button w3-large" onclick="close()">Close &times;</button></div>
    <main>
        <button class="w3-button w3-white w3-xxlarge">☰</button>
        <h1>Panel escamotable</h1>
        <p>Panel utilisé et adapté: <a
                href="https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_animate">W3.CSS Animated
                Sidebar</a></p>
    </main>
    <script src="script/panel.js"></script>
    <script src="script/main.js"></script>
 
</body>
style="background-color:red;"
 
</html>

Main.js

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
 
 
/**
 * Panel escamotable
 * Fichier script/main.js
 * lié à la gestion de la page
 */
"use strict";
 
console.log('script/main.js loaded');
 
let pan = new Panel(document.getElementById('hote_panel'));
 
document.querySelector('main > button').addEventListener('click', () => { pan.open() });
 
document.getElementById("hote_panel").addEventListener('click', () => { pan.close() });
 
console.log(pan)
 
function open() {
    document.getElementById("hote_panel").style.display = "block";
}
 
function close() {
    document.getElementById("hote_panel").style.display = "none";
}
 
document.getElementById('hote_panel').style.backgroundColor = pan.bckcolor;
 
// pan.bckcolor.innerHTML = document.getElementById('hote_panel').style.backgroundColor;

panel.js

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
 
/**
 * Objet Panel escamotable
 * Fichier script/panel.js
 * lié à la gestion de la page
 */
"use strict";
 
console.log('script/panel.js loaded');
 
 
class Panel {
    constructor(color) {
        this.bckcolor = color;
    }
 
 
    // //methode ouvrir sidebar
    open() {
        return document.getElementById("hote_panel").style.display = "block";
    }
 
    // //methode fermer sidebar
    close() {
        return document.getElementById("hote_panel").style.display = "none";
    }
 
 
    // Accesseur get ("getter")
    get color() {
        return this.bckcolor;
    }
 
    // Accesseur set ("setter")
    set color(c) {
        this.bckcolor = c;
    }
 
}

**Beginner.** · 19/05/2020, 05h07

Salut,

Envoyé par MI7QC

donc dans la console quand je rentre ceci pan.bckcolor = "red"

Oui c'est normal que là cela fonctionne, puisque (suite à cette affectation) pan.bckcolor contient une chaine correspondant à un nom de couleur...

Envoyé par MI7QC

j'ai créé un objet dans mon fichier panel.js celui-ci comprend un constructeur en paramètre la valeur color et j'ai un setteur pour attribuer une valeur de mon choix via la console(ici il est question de rentré une couleur).

Je ne suis pas sûr que tu ais bien compris comment fonctionne le constructeur et les getters/setters...

Tu n'as pas besoin de la propriété "color" donc tu peux supprimer le getter et le setter lui correspondant...

La propriété "bckcolor" suffit mais tu as mal utilisé le constructeur :

Envoyé par MI7QC

mais dans mon fichier main.js les deux dernière ligne j'ai fais des test pour changer le backgroundColor et quand je tape ceci

Code :

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

document.getElementById('hote_panel').style.backgroundColor = pan.bckcolor;

l'objet pan.bckcolor a aucune valeur mais pourquoi?

La propriété "pan.bckcolor" a bien une valeur mais ce n'est pas celle que tu attendais, regarde ce que tu as fais :let pan = new Panel(document.getElementById('hote_panel'));... Or l'exécution de cette instruction provoquera l’exécution du constructeur de la classe Panel :

Code :

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

1
2
3
constructor(color) {
        this.bckcolor = color;
    }

or tu as passé en paramètre ceci : document.getElementById('hote_panel') qui renvoi l’élément HTML ayant ceci 'hote_panel' pour id, ce n'est donc pas un nom de couleur. Le paramètre "color" contiendra donc une référence à cet élément html et cette référence est affectée à la propriété "bckcolor" lorsque l'instruction this.bckcolor = color; est exécutée.

Et c'est pour cela que

Code :

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

document.getElementById('hote_panel').style.backgroundColor = pan.bckcolor;

ne fonctionne pas (oui car, comme expliqué, pan.bckcolor contient une référence à un élément html et non une chaine correspondant à un nom de couleur).

--> Pour que cela fonctionne il faudrait remplacer ceci : let pan = new Panel(document.getElementById('hote_panel')); par (par exemple) ceci : let pan = new Panel("red"); (pour mettre en rouge).

**MI7QC** · 20/05/2020, 04h48

Merci des informations j'ai rajouté une variable et fait ce que tu avais écrit mais celle-ci une fois dans la console je suis pas capable de faire changé la couleur rouge par vert... mais sinon de base que je rouvre la page web la couleur est bien assigné.

Quand j'ai instancié un nouvelle objet avec la variable pan a se moment présent elle est sensé avoir la propriété bckcolor si je vais dans la console et je tape juste pan. je vais voir tous les propriété de l'objet puis quand je tape pan.bckcolor je suis sensé lui attribué une valeur qui est pris en considération j'ai corrigé mon code comme demandé mais humm il a de quoi qui ne fonctionne pas.

voici ce que je travaille en se moment peut être l'énoncé sera mieux explicite que dans mes mots.

il y a un gif animé qui montre le rendu final...

https://infoo.herokuapp.com/course/j...at_nav_console

pourtant lui il rentre pan.bckcolor il cella fonctionne comme un charme.

**Beginner.** · 20/05/2020, 11h06

Envoyé par MI7QC

Merci des informations j'ai rajouté une variable et fait ce que tu avais écrit mais celle-ci une fois dans la console je suis pas capable de faire changé la couleur rouge par vert... mais sinon de base que je rouvre la page web la couleur est bien assigné.

Quand j'ai instancié un nouvelle objet avec la variable pan a se moment présent elle est sensé avoir la propriété bckcolor si je vais dans la console et je tape juste pan. je vais voir tous les propriété de l'objet puis quand je tape pan.bckcolor je suis sensé lui attribué une valeur qui est pris en considération j'ai corrigé mon code comme demandé mais humm il a de quoi qui ne fonctionne pas.

Il ne suffit pas de changer la propriété bckcolor pour changer la couleur du panel. La couleur du panel est fixée par cette ligne : document.getElementById('hote_panel').style.backgroundColor = pan.bckcolor; dans le fichier main.js or celle-ci n'est exécutée qu'une fois lors du chargement du fichier main.js...

Pour changer la couleur dans la console tu n'as même pas besoin de la propriété bckcolor, tu peux faire directement : document.getElementById('hote_panel').style.backgroundColor = "green" pour mettre en vert par exemple...

Tu peux aussi ajouter une fonction "changeCouleur" si tu veux...

Maintenant si tu veux automatiser les choses c'est possible mais il faudrait que tu nous dises exactement ce que tu veux faire...

Envoyé par MI7QC

voici ce que je travaille en se moment peut être l'énoncé sera mieux explicite que dans mes mots.

il y a un gif animé qui montre le rendu final...

https://infoo.herokuapp.com/course/j...at_nav_console

pourtant lui il rentre pan.bckcolor il cella fonctionne comme un charme.

Je ne vois pas où "il rentre pan.bckcolor", ce n'est peut-être pas le bon lien ?

Sinon tu veux faire l'exercice qui se trouve dans ce lien, c'est ça ?

Une petite remarque : jouer comme cela dans la console ce n'est très pratique, non ?
Pourquoi ne pas faire une interface graphique avec du html/css ?

**MI7QC** · 20/05/2020, 22h45

Je ne vois pas où "il rentre pan.bckcolor", ce n'est peut-être pas le bon lien ?

Bonjours, Oui c'est le bon lien et quand il rentre pan.bckcolor c'est a la fin du gif, j'avoue que c'est pas super pratique d'attendre après le gif.

voici mes avancés

j'ai fais quel que modification ici.

mains.js

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
 
 
/**
 * Panel escamotable
 * Fichier script/main.js
 * lié à la gestion de la page
 */
"use strict";
 
console.log('script/main.js loaded');
 
let pan = new Panel(document.getElementById('hote_panel'));
 
document.querySelector('main > button').addEventListener('click', () => { pan.open() });
 
document.getElementById("hote_panel").addEventListener('click', () => { pan.close() });

maintenant quand je rentre dans la console pan.bckcolor = "red"; je peux la changé comme je veux parce que a tous les fois que je rouvre le panneaux avec la fonction open il load a nouveaux.

panel.js

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
 
 
/**
 * Objet Panel escamotable
 * Fichier script/panel.js
 * lié à la gestion de la page
 */
"use strict";
 
console.log('script/panel.js loaded');
 
 
class Panel {
    // constructor(color) {
    //     this.bckcolor = color;
    // }
 
 
    constructor(parent, bckcolor = 'green') {
        this.parent = parent;
        this.bckcolor = bckcolor;
 
    }
 
    // //methode ouvrir sidebar et appliquer la couleur du background.
    open() {
 
        document.getElementById("hote_panel").style.backgroundColor = this.bckcolor;
 
        return document.getElementById("hote_panel").style.display = "block";
 
    }
 
    // //methode fermer sidebar
    close() {
        return document.getElementById("hote_panel").style.display = "none";
    }
 
}

mais je crois que c'est pas exactement ce qui est demandé dans l’énoncer. j'ai pris le temps de relire l'image joint ici.

Nom : testest.PNG
Affichages : 98
Taille : 96,0 Ko

Nom : testest.PNG
Affichages : 98
Taille : 96,0 Ko

j'ai crois avoir mieux compris l'énoncé dans ma class je dois créer un élément principal
une(div)
ensuite lui attribuer un id
lui donner une className

et simplement d'avoir le même code html comme sur le lien montré. j'ai des chose a retravailler mais j'ai quand même appris quel que notions a travers mes erreurs

**MI7QC** · 21/05/2020, 18h42

Voila j'ai résolus tous mes problèmes

panel.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
 
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Panel escamotable</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 
<body>
    <div id="hote_panel"></div>
    <main>
        <button class="w3-button w3-white w3-xxlarge">☰</button>
        <h1>Panel escamotable</h1>
        <p>Panel utilisé et adapté: <a
                href="https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_animate">W3.CSS Animated
                Sidebar</a></p>
    </main>
    <script src="script/panel.js"></script>
    <script src="script/main.js"></script>
</body>
 
</html>

main.js

Code javaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/**
 * Panel escamotable
 * Fichier script/main.js
 * lié à la gestion de la page
 */
"use strict";
 
console.log('script/main.js loaded');
 
let pan = new Panel(document.getElementById('hote_panel'));
 
document.querySelector('main > button').addEventListener('click', () => { pan.open() });

panel.js

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
54
55
56
57
58
 
/**
 * Objet Panel escamotable
 * Fichier script/panel.js
 * lié à la gestion de la page
 */
"use strict";
 
console.log('script/panel.js loaded');
 
 
class Panel {
 
    constructor(parent, bckcolor = "green") {
        this.parent = parent;
        this.bckcolor = bckcolor;
 
        // Ne sera pas afficher quand la page sera charger
        this.parent.style.display = "none";
 
        //creation d'une var Div
        let eDiv = document.createElement("DIV");
        eDiv.setAttribute("class", "w3-sidebar w3-bar-block w3-animate-left");
        eDiv.setAttribute("id", "color");
 
        // //creation d'un bouton 
        let eButton = document.createElement("BUTTON");
        eButton.setAttribute("class", "w3-button w3-white w3-xxlarge");
        eButton.setAttribute("id", "close");
        //affiche le text close
        eButton.innerHTML = "close";
 
        // //insérer la var ePan a l'intérieur de eDiv
        let ePan = this.parent.appendChild(eDiv);
 
        ePan.appendChild(eButton);
 
        document.getElementById("close").addEventListener("click", () => { this.close() });
 
    }
 
    // //methode ouvrir sidebar et appliquer la couleur du background.
    open() {
 
        // change le backgroung color
        document.getElementById("color").style.backgroundColor = this.bckcolor;
 
        //fait apparaitre le menu
        this.parent.style.display = "block";
 
    }
 
    // //methode fermer sidebar
    close() {
        this.parent.style.display = "none";
    }
 
}

Changer BackgroungColor a l'aide d'un objet

JavaScript

Vue hybride

Discussions similaires

Partager

Partager