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