Réinitialisation variable tableau

Version imprimable

Bonjour à tous et toutes,

J'ai un soucis avec la variable coloration qui ne veut pas repartir à 255,255,255 mais je réussi par contre à augmenter la noirceur du rouge à chaque Click de boutons...

C'est à n'y rien comprendre....

Merci d'avance

Code:

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
var coloration = [255,255,255];
 
// cette fct fonctionne bien...
function double(coloration){ 
    doubleValeur.addEventListener('click', function (evt){
        var small = parseInt(valeurSmall.innerHTML);
        var big = parseInt(valeurBig.innerHTML);
        coloration = darker(coloration);
        console.log(coloration);
        if (small === 400 && big === 800){
            small = 500;
            big = 1000;
        } else {
            small = small * 2;
            big = big * 2; 
        }  
        valeurSmall.innerHTML = small.toString();
        valeurBig.innerHTML = big.toString();
        valeurSmall.style.color =       "rgb("+coloration[0]+","+coloration[1]+","+coloration[2]+")";
        valeurBig.style.color = 
        "rgb("+coloration[0]+","+coloration[1]+","+coloration[2]+")";
 
        if (resetValeur.getAttribute("class") === "disabled"){
            resetValeur.setAttribute("class", "");
        }            
    });    
}
 
// voici ma fonctionne : et aussi marche bien
function darker(coloration){
    if (coloration[1] > 0 && (coloration[1] - 25 >= 0) ){
        coloration[1] = coloration[1] - 25;
        coloration[2] = coloration[2] - 25;
    } else if (coloration[0] > 0 && (coloration[0] - 25 >= 0) )  {        
        coloration[0] = coloration[0] - 25;
        coloration[1] = 0;
        coloration[2] = 0;        
    } else {
        coloration[0] = coloration[1] = coloration[2] = 0;
    }
    return coloration;
}
 
 
// Il est ici le problème....
 
function reset(coloration){    
    resetValeur.addEventListener('click', function (evt){
        var small = parseInt(valeurSmall.innerHTML);
        var big = parseInt(valeurBig.innerHTML);
        console.log(coloration);
        coloration = lighter(coloration);
        console.log(coloration);
        small = 25;
        big = 50;
        valeurSmall.innerHTML = small.toString();
        valeurBig.innerHTML = big.toString();
        resetValeur.setAttribute("class", "disabled");
// ces valeurs remettre effectivement mon texte en blanc....
        valeurSmall.style.color = "rgb(255,255,255)";
        valeurBig.style.color = "rgb(255,255,255)";
 
        return coloration; // ca ne marche pas
    }); 
}
 
// cette fct sera caller dans reset seulement, un genre de remise à valeur initiale
function lighter(coloration){
    coloration = [255,255,255];
    return coloration;
}
 
Voici mes appels de fonctions tel qu'on me le enseigner à l'école :
 
document.addEventListener('DOMContentLoaded', function(event) {
    double(coloration);
    reset(coloration);
});

13/12/2017, 19h02
Beginner.

Salut,

C'est plus difficile d'aider quand on ne peut pas tester nous même ton code et pour cela il faudrait que tu ajoutes le HTML|CSS...

Est-ce pour faire un "Color Picker" ?

En effet du moins si c'est ce que je pense soit un foncissement de la couleur vers le noir...juste pour m'amuser et me donner des petits défis....

Et je dois remercier ««« jreaux62 »»» de m'avoir montrer la notion de flex-box qui est malade ! :mrgreen::mrgreen::mrgreen::mrgreen:

Voici ausssi mes autres variables JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
const doubleValeur = document.querySelector('#double');
const resetValeur = document.querySelector('#reset');
const temps15min = document.querySelector('#timer15');
const temps30min = document.querySelector('#timer30');
const stopTimer = document.querySelector('#timerStop');
const reprendTimer = document.querySelector('#timerReprend');
 
const valeurSmall = document.querySelector('#valeurSmall');
const valeurBig = document.querySelector('#valeurBig');
 
var coloration = [255,255,255];

Code:

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
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="timer.css">      
        <title>Timer</title>
 
    </head>
    <body>
        <h2>Voici la section des valeurs en jeton possible !</h2>
 
        <div class="tableauDesMises">
            <div class="lesMises">
                <div class="titre">
                    <p>Voici les mises possible</p>
                </div>
                <div class="small">
                    <p>La petite mise</p>
                </div>
                <div class="big">
                    <p>La grosse mise</p>
                </div>            
                <div class="valeurSmall">
                    <p id="valeurSmall">25</p>
                </div>
                <div class="valeurBig">
                    <p id="valeurBig">50</p>
                </div>
            </div>
            <div class="lesBoutonsMises">
                <div class="double">
                    <button id="double">Doubler</button>
                </div>
                <div class="reset">
                    <button class="disabled" id="reset">Valeur Initial</button>
                </div>
            </div>
        </div>
 
        <h2>Voici la section des périodes de temps possible !</h2>
 
        <div class="tableauDuTemps">
            <div class="timer">
                <div class="periode">
                    <p>Vous avez choisi la période : XXX</p>
                </div>
                <div class="minutes">
                    <p>Minutes</p>
                </div>
                <div class="secondes">
                    <p>Secondes</p>
                </div>
                <div class="chiffreMin">
                    <p>00</p>
                </div>
                <div class="chiffreSec">
                    <p>00</p>
                </div>            
            </div>   
            <div class="lesBoutonsActions">
                <div class="min15">
                    <button id="timer15">15 minutes</button>
                </div>
                <div class="min30">
                    <button id="timer30">30 minutes</button>
                </div>
                <div class="stop">
                    <button class="disabled" id="timerStop">STOP</button>
                </div>
                <div class="reprend">
                    <button class="disabled" id="timerReprend">REPRENDRE</button>
                </div>
            </div> 
        </div>
        <script type="text/javascript" src="timer.js"></script>
    </body>
</html>

Code:

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
*{
    box-sizing: border-box;
    padding: 0;
}
body{
    margin: 0;
    background-color:beige;
}
h2{
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
.tableauDesMises{ /*on détermine le parent comme un flex*/
    display: -webkit-flex; 
    display: flex;
    background-color: black;
    width: 65%;
    margin: auto;
    /* Je n'ai pas besoin de wrap comme mes deux sous div font 70/30 */
} 
.tableauDesMises > div {
	display: flex; /* lesMises et lesBoutonsMises */
	flex-wrap: wrap; /* les enfants de lesMises et lesBoutonsMises seront sur plusieurs lignes  */
    display: -webkit-flex; 
	-webkit-flex-wrap: wrap; 
}
.tableauDesMises > div > div{    
    border: 3px outset #b3d9ff;
    vertical-align: middle;    
}
.lesMises{
    width: 70%;
}
.lesMises .titre{
    width: 100%;
}
.lesMises .small, .lesMises .big, .lesMises .valeurSmall, .lesMises .valeurBig{
    width: 50%;
}
.lesBoutonsMises{
    width: 30%;
}
.lesBoutonsMises > div{
    display: -webkit-flex;
    display: flex;
    width: 100%;    
}
.tableauDesMises p{
    text-align: center;
    color: white;
    margin: 5px;    
    font-size: 40px;
    font-weight: bold;
    padding: 20px;
}
.valeurSmall p, .valeurBig p{
    font-size: 64px;
}
.tableauDesMises button {
    width: 100%;
    transition-duration: 0.4s;
    padding: 10px;
    color: white;
    background: darkblue;
    font-weight: bold;
    font-size: 48px;
}
.tableauDesMises button:hover {
    cursor: pointer;
    background: darkgreen;
}
/* adaptation petit media (phone,...) */
/* les boutons SOUS le tableau */
@media screen and (max-width:768px) {
  .tableauDesMises {
    width: 100%;
    -webkit-flex-direction:column; 
    flex-direction:column; 
  }
  .lesMises, .lesBoutonsMises {
    width: 100%;
  }
  .lesBoutonsMises > div {
    width: 50%;
  }
}
/* Pour le deuxième tableau !!! */
.tableauDuTemps{ /*on détermine le parent comme un flex*/
    display: -webkit-flex; 
    display: flex;
    background-color: black;
    width: 65%;
    margin: auto;
    /* Je n'ai pas besoin de wrap comme mes deux sous div font 70/30 */
} 
.tableauDuTemps > div{
    display: -webkit-flex; 
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.tableauDuTemps > div > div{    
    border: 3px outset MediumSeaGreen;
    vertical-align: middle;    
}
.timer{
    width: 70%;
}
.timer .periode{
    width: 100%;
}
.timer .minutes, .timer .secondes, .timer .chiffreMin, .timer .chiffreSec{
    width: 50%;
}
.lesBoutonsActions{
    width: 30%;
}
.lesBoutonsActions > div{
    display: -webkit-flex;
    display: flex;
    width: 100%;    
}
.tableauDuTemps p{
    text-align: center;
    color: white;
    margin: 5px;    
    font-size: 40px;
    font-weight: bold;
    padding: 15px;
}
.chiffreMin p, .chiffreSec p{
    font-size: 64px;
}
.tableauDuTemps button {
    width: 100%;
    padding: 10px;
    color: white;
    transition-duration: 0.4s;
    background: darkblue;
    font-weight: bold;
    font-size: 28px;    
}
.tableauDuTemps button:hover {
    cursor: pointer;
    background: darkgreen;
}
 
/* adaptation petit media (phone,...) */
/* les boutons SOUS le tableau */
@media screen and (max-width:768px) {
  .tableauDuTemps {
    width: 100%;
    -webkit-flex-direction:column; 
    flex-direction:column; 
  }
  .timer, .lesBoutonsActions {
    width: 100%;
  }
  .lesBoutonsActions > div {
    width: 50%;
  }
}
.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

Voici ma solution à mon problème après quelques bières injectés en boucle dans mon système :)

Code:

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
 
function double(){      
    doubleValeur.addEventListener('click', function (evt){
        console.log(coloration+"couleur avant la verif");
        var small = parseInt(valeurSmall.innerHTML);
        var big = parseInt(valeurBig.innerHTML);
        // si le bouton reset n'est pas valide, alors on le rend disponible et en plus on fait reset de la valeur de la couleur à rendre plus foncé avec ce doublage !
        if (resetValeur.getAttribute("class") === "disabled"){
            resetValeur.setAttribute("class", "");  
            coloration = [255,255,255];
        }  
        // On caller la fct et on retourne la couleur plus foncé
        coloration = darker(coloration);
 
        // Vérification si le small et big sont d'une certaine valeur car règle maison pour simplifier le conteage des jetons.
        if (small === 400 && big === 800){
            small = 500;
            big = 1000;
        } else {
            small = small * 2;
            big = big * 2; 
        }          
 
        // nouvelle valeur des mises à afficher
        valeurSmall.innerHTML = small.toString();
        valeurBig.innerHTML = big.toString();
 
        // nouvelle coloration à effectuer sur les nouvelles mises
        valeurSmall.style.color =       "rgb("+coloration[0]+","+coloration[1]+","+coloration[2]+")";
        valeurBig.style.color = 
        "rgb("+coloration[0]+","+coloration[1]+","+coloration[2]+")";                  
    });    
}

Voilà c'était simple finalement....