Problème avec la fonction appendChild

Gomes Andres
Javascript

Bonsoir à tous!

Avant de vous exposer mon problème je tenais à vous dire que je suis un développer débutant. Cela dit, voici ce que j'aimerais faire. J'aimerai à l'aide d'un clic switcher une image d'un bloc à un autre. Pour être encore plus précise je suis entrain de faire un gestionnaire d'équipe eSport et je voudrais ajouter ou supprimer les joueurs dans l'équipe.

Voici le code que je suis entrain d'utiliser pour m'exercer avant de l'implémenter à mon site.

<body>
    <div class="mainContaint">

    <div id="blocTop" class="bloc1">
        <div class="cart top1 red"></div>
        <div class="cart top2 red"></div>
        <div class="cart top3 red"></div>
        <div class="cart top4 red"></div>
        <div class="cart top5 red"></div>
        <div class="cart top6 red"></div>
        <div class="cart top7 red"></div>
        <div class="cart top8 red"></div>
    </div>

    <div id="blocBottom" class="bloc2">
        <div class="cart top1 blue"></div>
        <div class="cart top2 blue"></div>
        <div class="cart top3 blue"></div>
        <div class="cart top4 blue"></div>
        <div class="cart top5 blue"></div>
        <div class="cart top6 blue"></div>
        <div class="cart top7 blue"></div>
        <div class="cart top8 blue"></div>
    </div>

    </div>
</body>
css

.bloc1{
    display: flex;
    flex-direction: row;
    margin-bottom: 100px;
}

.bloc1 .cart{
    width: 200px;
    height: 100px;
    margin: 20px;
}

.bloc2{
    display: flex;
    flex-direction: row;
}
.bloc2 .cart{
    width: 200px;
    height: 100px;
    margin: 20px; 
}

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

Et la mon casse tête le JS

<script>

var cartTops = document.querySelectorAll('.bloc1 .cart')
var blocBottom = document.getElementById('blocBottom')
var blocTop = document.getElementById('blocTop')

for(i=0; i <= cartTops.length -1; i++){
    var cartTop = cartTops[i]
        cartTop.addEventListener("click", function(){
            select = this;
            console.log(select)
            blocBottom.appendChild(select)

    })
}

var cartBottoms = document.querySelectorAll('.bloc2 .cart')

for(i=0; i <= cartBottoms.length -1; i++){
    var cartBottom = cartBottoms[i]
        cartBottom.addEventListener("click", function(){
            select = this;
            console.log(select)
            blocTop.appendChild(select)

    })
}

</script>

Donc voilà! Quand je clic, l'image ce déplacer bien dans la DIV en dessous ou en dessus. Cependant quand je re clic sur une des images qui a été swichter, il ne se passe rien. J'ai testé pas mal de choses que j'ai vu sur internet mais rien ne fait. Avez-vous une solution ou une meilleure piste ?

4 réponses

Orivoir21
Réponse acceptée

Bonjour , les cartes du haut : '.bloc1 .cart' , on un événement associé qui les déplacent en bas mais quand elles sont en bas ces toujours le même événement qui ce déclenche et comme elles sont déjà en bas , ben il bougent pas .
et vice versa pour les cartes du haut : '.bloc2 .cart' .

   function moveToBottom(){
            select = this;
            console.log(select)
            blocBottom.appendChild(select) ; 
            // déplace la carte dans le bloc : blocBottom

            select.removeEventListener('click' , moveToBottom , false ) ;
            // supprime l'événement qui déplace la carte vers le bas ( puisque elle y et maintenant )

            select.addEventListener('click' , moveToTop , false ) ;
            // attache un événement qui déplacera la carte vers le haut au prochain click
    }
    // et vice versa avec la fonction moveToTop qui déplace la carte vers le haut détache l'événement et 
    // ratache un événement pour la déplacé vers le bas 

    // ... for ...
   cartTop.addEventListener("click",  moveToBottom  , false ) ;
Gomes Andres
Auteur

merci Orivoir21. Comme je m'en douté c'est une erreure de débutant et du manque de connaissance. J'aimerai profiter de ta gentillesse pour te poser une autre question. existe-t-il un moyen pour voir les events lier peut-être dans l'inspecteur google ?

HannibalJoost

Dans ton inspecteur de Chrome, quand tu es en mode inspection d'éléments, tu as une deuxième partie d'écran en bas (ou à droite selon ta config) qui comporte "styles, computed,…" et "Event Listeners" qui devrait répondre à ta question.

Christoph Robert

Bonjout a tous