Discussion :

[TedTech]

Bonjour,

Je ne comprends la sortie de mon tableau memocard.

Code :

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

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.

[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;

[TedTech]

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

Code :

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

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à

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

[javatwister]

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

[TedTech]

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

Merci beaucoup !

Code :

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
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 = [];
 
            }
        }
 
    })
}

[danielhagnoul]

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.