Problème Javascript avec onclick

Jean Poutre
Javascript

Bonjour à tous !

Voilà je rencontre un petit problème avec mon code.

Ce que je fais

Je suis en train de créer une faq, et dans ma faq j'aimerais ajouter une flèche que fait une rotation de 180 degrés lorsque je clique sur la question qui affiche la réponse.


<script>
    var delta =0;

    function rotateBy180Deg(ele){
        ele.style.webkitTransform="rotate("+delta+"deg)";
        delta+=180;
    }
</script>

<div id="x-accordion">

      <!-- BLOC 1 --> 
      <a class="card-link" data-toggle="collapse" href="#collapse1" onclick="rotateBy180Deg(image)">
      <div class="x-card">  
          <div class="card-header">
            <img src="picture/icon/fleche.png" width="40" id="image" class="rotated-image"> 
            QUESTION ?
          </div>
      </a>
        <div id="collapse1" class="collapse" data-parent="#accordion">
          <div class="card-body">
            RÉPONSE !
          </div>
        </div>
      </div>

      </div>

Ce que je veux

Je veux que la flèche tourne dès le premier clique, et je ne sais vraiment pas pourquoi la flèche tourne dès le second clique...
J'utilse bootstrap pour le collapse.

Ce que j'obtiens

La flèche tourne au bout du second clique.

Merci à tous !

2 réponses

keulu
Réponse acceptée

tu déclare ton delta APRES vouloir effectuer ta rotation. du coup, tu init ta var delta a 0, tu rotate vers 0° et tu met a jour ta var a 180 ensuite apres la 1ere rotation, donc ca fonctionne au 2eme coup car delta vaudra 180...

Jean Poutre
Auteur

Merci keulu, je manque de logique.
Ta réponse était parfaite, mon problème est désormais résolu.

Merci à toi :D !