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.