Inverser les couleurs de fond au clic

Version imprimable

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:

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.

18/12/2019, 07h34
kevin254kl

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.
18/12/2019, 09h28
nelka94

Citation:

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...

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:

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:

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:

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:

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:

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:

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.

:salut:

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:

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:

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

Bonjour,

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

Code:

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

Code:

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:

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

19/12/2019, 03h41
nelka94

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

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

pourquoi faire :
Code:

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:

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.

Bonjour,

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

Code:

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:

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:

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) { ...