Comportement Méthode push

Version imprimable

Bonjour,

Je ne comprends la sortie de mon tableau memocard.
Code:

1 2 3 4 5 6 7 function showCard(){ let memocard = []; document.addEventListener('mousedown', (e)=>{ let clickcards = e.target.id; memocard.push(clickcards); document.getElementById(clickcards).style.color = "blue"; });
Quand je demande le tableau memocard il se passe un truc bizarre.

Par exemple premier clique sur l'élément, memocard donne = ['element1']

Deuxième clique sur un autre élément de la fenetre, memocard donne = ['elelment1', 'element2', 'element2']

troisième clique sur au autre élement de la fenetre, memocard donne = ['elelment1', 'element2', 'element2', 'element 3', 'element 3', 'element 3']

Et ainsi de suite....

Pourriez-vous me dire pourquoi j'obtiens ce comportement ?

Merci de votre aide.

12/10/2019, 10h38
javatwister

Bonjour,

Je n'ai pas ce comportement quand je teste;
Je ne sais pas comment tu appelles showCard(). Sur load de window? J'ai essayé aussi et le tableau se remplit normalement;

La fonction ShowCard() est lancée au moment de l'activation de la fonction play().

Code:

1
2
3
4
5
6
7
8
9
10
11
function play(){
    document.addEventListener('click', (e)=>{
        let clickcards = e.target.id;
        let cardValue = document.getElementById(clickcards).innerHTML;
        showCard();
 
        if(cardValue != "Mélanger les cartes"){
 
            pairs.push(cardValue);
        }
}

Tu crois que le problème pourrais venir de là

12/10/2019, 11h06
javatwister

Une imbrication de click et mousedown est plutôt hasardeuse, non?

Vérifie aussi la parenthèse de fin de tes gestionnaires d'événement et l'accolade de fin de tes fonctions...
12/10/2019, 11h21
javatwister

De plus, je ne sais pas comment ni où tu appelles memocard mais en tout cas, le tableau est réinitialisé à chaque mousedown...

Voici mon code au complet.:D
Si cela peux t'aider à m'aider :)

Merci beaucoup !

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
const cardblocks = document.querySelectorAll('.cardblock');
const cards = ["1", "1", "2", "2", "3","3", "4", "4", "5", "5","6", "6", "7", "7", "8","8", "9", "9", "10", "10"];
const start = document.querySelector('#random');
const scoreP1 = document.querySelector('.scoreP1');
const scoreP2 = document.querySelector('.scoreP2');
const woncardsP1 = document.querySelector('.woncardsP1');
const woncardsP2 = document.querySelector('.woncardsP2');
let joueur = 1;
let pairs = [];
let score1 = 0;
let score2 = 0;
let memocard = [];
 
start.addEventListener('click', randomMix);
 
function showCard(){
 
    document.addEventListener('mousedown', (e)=>{
        let clickcards = e.target.id;
        memocard.push(clickcards);
        document.getElementById(clickcards).style.color = "blue";
    });
 
 
 
}
 
 
 
function randomMix(){
    let cardscopy = cards.slice(0);
    let cardsrandom =[];
 
    while(cardsrandom.length < cards.length){
        cardsrandom.push(cardscopy.splice(Math.floor(Math.random() * cardscopy.length), 1)[0]);
    }
    for(i=0; i<cardsrandom.length; i++){
        console.log(cardblocks[i]);
        cardblocks[i].innerHTML = cardsrandom[i];
    }
 
    play();
}
 
function play(){
    document.addEventListener('click', (e)=>{
        let clickcards = e.target.id;
        let cardValue = document.getElementById(clickcards).innerHTML;
        showCard();
 
        if(cardValue != "Mélanger les cartes"){
 
            pairs.push(cardValue);
        }
 
        if(pairs.length>=2){
 
            if(pairs[0] === pairs[1]){
 
                if(joueur == 1){
                    woncardsP1.innerHTML = pairs;
                    score1 +=1;
                    scoreP1.innerHTML = score1;
                    pairs = [];
 
                }else{
                    woncardsP2.innerHTML = pairs;
                    score2 +=1;
                    scoreP2.innerHTML = score2;
                    pairs = [];
                }
                console.log("tu gagnes une paires !");
                console.log("a toi de rejouer");
 
            }else{
                if(joueur == 1){
                    joueur = 2;
                }else{
                    joueur = 1;
                }
                console.log(`A ton tour joueur ${joueur}`);
                pairs = [];
 
            }
        }
 
    })
}

12/10/2019, 12h23
danielhagnoul

:salut:

Il ne faut jamais mettre un gestionnaire d'événement dans une fonction à moins d'être absolument certain que cette fonction ne sera appelée qu'une seule fois.
12/10/2019, 12h26
javatwister

remplace ta ligne 22 par ceci:

Code:

},{capture:false,once:true});

et dis-moi ce qui se passe!
12/10/2019, 12h41
TedTech

ça marche nickel ! Merci bcp @javatwister.

C'est possible d'avoir une explication sur ce petit bout de code ? Dans quelles situations il faut l'insérer ?

Merci Beaucoup ?
12/10/2019, 14h07
javatwister

Ici, c'est surtout l'option once qui joue; elle annule le gestionnaire mousedown comme si tu invoquais removeEventListener aussitôt après l'événement; sinon, ton élément est surchargé par un 2e, puis un 3e appel, etc. au même gestionnaire...; En tout cas, c'est comme ça que je le conçois :roll:

l'option capture, c'était juste au cas où tu aurais des éléments DOM imbriqués, vu que je ne connais pas ta page HTML: donner la valeur false interdit les cascades dans la hiérarchie...
12/10/2019, 14h09
TedTech

Merci beaucoup pour l'aide et les explications :)