Inverser les couleurs de fond au clic

**nelka94** · 18/12/2019, 04h37

Bonjour

j'ai 2 carrés de couleurs différentes. en cliquant sur l'un ou l'autre , ça doit inverser la couleur des 2 carrés.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .un{
            width: 40px;
            height: 40px;
            background-color: red;
            display: inline-block;
            text-align: center;
            
            
            
        }
        .num{
            position : relative;
            bottom: -7px;
        }
        .deux{
            width: 40px;
            height: 40px;
            background-color: green;
            display: inline-block;
            text-align: center;
        }
 
    </style>
</head>
<body>
    <div class="un"><div class="num">1</div></div>
    <div class="deux"><div class="num">2</div></div>
    <script>
        var un = document.querySelector('.un');
        var deux = document.querySelector('.deux');
        un.addEventListener('click', function(){
            let c = getComputedStyle(this).backgroundColor;
            this.style.backgroundColor = getComputedStyle(deux).backgroundColor;
            deux.style.backgroundColor = c; 
        });
        deux.addEventListener('click', function(){
            let c = this.style.backgroundColor;
            this.style.backgroundColor = un.style.backgroundColor;
            un.style.backgroundColor = c;       
        });
 
    </script>
</body>
</html>

je ne comprends pas pourquoi dans ma console dans style>backgroundColor, j'ai comme valeur "" quand je fais un console.log sur un ou deux.
comme le style.backgroundColor ne marchait pas trop pendant le débuggage, en faisant une recherche sur le net, j'ai trouvé une fonction que je ne connaissais pas: getComputedStyle.

là le programme marche à 90%, car le carré 2 ne réagit pas au click quand je le clique en 1er, par contre quand je commence par le carré 1, le carré 2 réagit au clic, en écrivant ces lignes, je me dis qu'il faudrait peut etre que je teste d'inverser les 2 évènements dans le code pour voir si l'ordre a une importance.

ah oui, pas très à l'aise en "CSS", pour centrer le chiffre, je suis passée par le positionnement relatif, si quelqu'un a une solution plus simple, je prends.

toute observation sur le code sera utile.

Merci.

PS: je me dis que c'est pas très beau, voir affligeant de mettre 2 balises div autour d'un chiffre et qu'il y'a plus simple mais vu l'heure qu'il est, l'inspiration sera peut etre de mise dans quelques heures.

**kevin254kl** · 18/12/2019, 07h34

Salut,

style récupère le css dans la balise en faisant référence à l'attribut style alors que getComputedStyle fait référence au css appliqué à l'élément par la feuille de style (je ne sais pas si c'est bien dit).
Tu peux utiliser des variables pour les couleurs https://developer.mozilla.org/en-US/...tom_properties
Pour le positionnement utilise plutôt flex ou grid https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Dernier petit conseil utilise codepen https://codepen.io/pen?&editable=true&editors=0010 c'est plus simple pour les personnes qui veulent aider.

**nelka94** · 18/12/2019, 09h28

Envoyé par kevin254kl

style récupère le css dans la balise en faisant référence à l'attribut style alors que getComputedStyle fait référence au css appliqué à l'élément par la feuille de style (je ne sais pas si c'est bien dit).

Bonjour,
merci pour ton aide.
Si je comprends bien, c'est pour ça qu'au début mon carré 2 ne réponds pas.
le clic sur le 1er carré fait que les données deviennent accessibles au 2nd...

**NoSmoking** · 18/12/2019, 10h47

Bonjour et bienvenue sur DVP.

Lorsque l'on veut récupérer la valeur d'une propriété CSS il est effectivement souvent préférable de passer par getComputedStyle.

Concernant ton besoin, il faut que tu prennes du recul pour bien voir ce que tu souhaites réaliser, cela pourrait se traduire par :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
un.addEventListener('click', function () {
    const coulDiv1 = getComputedStyle(un).backgroundColor;
    const coulDiv2 = getComputedStyle(deux).backgroundColor;
    un.style.backgroundColor = coulDiv2;
    deux.style.backgroundColor = coulDiv1;
});
deux.addEventListener('click', function () {
    const coulDiv1 = getComputedStyle(un).backgroundColor;
    const coulDiv2 = getComputedStyle(deux).backgroundColor;
    un.style.backgroundColor = coulDiv2;
    deux.style.backgroundColor = coulDiv1;
});

On remarquera que dans les deux cas tu veux faire la même chose, échange de couleur entre les deux éléments donc il n'y a aucune raison d'avoir des fonctions différentes.

Lorsque l'on écrit plusieurs fois la même chose cela signifie que l'on peut décliner cela sous forme d'une fonction, comme par exemple :

Code :

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

1
2
3
4
5
6
function changeColor(){
    const coulDiv1 = getComputedStyle(un).backgroundColor;
    const coulDiv2 = getComputedStyle(deux).backgroundColor;
    un.style.backgroundColor = coulDiv2;
    deux.style.backgroundColor = coulDiv1;
}

L'affectation de cette fonction aux deux éléments se traduit de la façon suivante :

Code :

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

1
2
3
4
5
const un = document.querySelector('.un');
const deux = document.querySelector('.deux');
 
un.addEventListener('click', changeColor);
deux.addEventListener('click', changeColor);

Remarque sur le HTML-CSS :

Code html :

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

1
2
<div class="un"><div class="num">1</div></div>
<div class="deux"><div class="num">2</div></div>

peut s'écrire avantageusement

Code html :

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

1
2
<div class="un num">1</div>
<div class="deux num">2</div>

quant au CSS il est factorisable de la manière suivante :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.num {  /* ici les propriétés/valeurs communes */
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.un {
  background-color: red;
}
.deux {
  background-color: green;
}

au final le résultat sera le même.

**danielhagnoul** · 18/12/2019, 10h48

La complication vient du fait qu'il y a deux divisions imbriquées et que l'on change la couleur de fond d'une paire en cliquant sur l'autre paire.

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
.un {
  width: 40px;
  height: 40px;
  background-color: red;
  display: inline-block;
  text-align: center;
}
 
.num {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 7px;
}
 
.deux {
  width: 40px;
  height: 40px;
  background-color: green;
  display: inline-block;
  text-align: center;
}

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const elem_un = document.querySelector('.un');
    const elem_deux = document.querySelector('.deux');
 
    elem_un.querySelector('.num').addEventListener('click', ev => {
        let bg_color = getComputedStyle(elem_un).backgroundColor;
        elem_un.style.backgroundColor = getComputedStyle(elem_deux).backgroundColor
        elem_deux.style.backgroundColor = bg_color; 
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    elem_deux.querySelector('.num').addEventListener('click', ev => {
        let bg_color = getComputedStyle(elem_deux).backgroundColor;
        elem_deux.style.backgroundColor = getComputedStyle(elem_un).backgroundColor;
        elem_un.style.backgroundColor = bg_color; 
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

Invité · 18/12/2019, 14h05

Bonjour,

une autre approche, et ajoutant/supprimant des classes : element.classList -> .toggle()

Code html :

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

1
2
    <div class="carre un bkg1">1</div>
    <div class="carre deux bkg2">2</div>

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
.carre {
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  color:#fff;
  line-height:40px;
}
.bkg1{
  background-color: red;
}
.bkg2{
  background-color: green;
}

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
const carres = document.querySelectorAll('.carre');
const un = document.querySelector('.un');
const deux = document.querySelector('.deux');
 
carres.forEach( function(carre){
  carre.addEventListener('click', function () {
      un.classList.toggle('bkg1');
      un.classList.toggle('bkg2');
      deux.classList.toggle('bkg1');
      deux.classList.toggle('bkg2');
  });
});

**nelka94** · 19/12/2019, 03h41

Merci NoSmoking, danielhagnoul et jreaux62.
J'apprends beaucoup à la lecture de vos codes.

**NoSmoking** · 19/12/2019, 11h15

@jreaux62 :
L'option du changement de classe est effectivement une autre bonne approche.

pourquoi faire :

Code :

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

1
2
3
const carres = document.querySelectorAll('.carre');
const un = document.querySelector('.un');
const deux = document.querySelector('.deux');

alors que carres contient un et deux ?

On peut également tirer partie des arguments de la fonction callback, et notamment du 3^éme, de la méthode forEach pour faire une boucle dans une boucle

Code :

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

1
2
3
4
5
6
7
8
9
const elements = document.querySelectorAll(".un, .deux");
elements.forEach(function (el, ind, arr) {
  el.addEventListener('click', function () {
    arr.forEach(function (el) {
      el.classList.toggle("un");
      el.classList.toggle("deux");
    });
  })
});

mais cela n'est pas forcément plus lisible.

Invité · 19/12/2019, 12h13

Bonjour,

On peut pousser l'amusement un peu plus loin, avec 3 ou 4 carrés de couleurs différentes :

Code html :

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

1
2
3
4
    <div class="carre bkg1">1</div>
    <div class="carre bkg2">2</div>
    <div class="carre bkg3">3</div>
    <div class="carre bkg4">4</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.carre {
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  color:#fff;
  line-height:40px;
}
.bkg1{ background-color: red; }
.bkg2{ background-color: green; }
.bkg3{ background-color: blue; }
.bkg4{ background-color: purple; }

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
"use strict";
const carres = document.querySelectorAll('.carre');
const carres_nbre = carres.length;
carres.forEach( function(elt){
  elt.addEventListener('click', function () {
    carres.forEach( function(el){
      let bkg_id = el.classList[1].replace('bkg','');
      el.classList.replace('bkg'+bkg_id,'bkg'+(1+bkg_id%carres_nbre)); // remplace la classe par la suivante
    });
  });
});

@ NoSmoking
J'avoue ne pas être familier des paramètres passés à function (el, ind, arr) { ...

Inverser les couleurs de fond au clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager