Déplacement d'un élément html en arrière avec javascript onclick

Question

Je n'ai jamais utilisé JavaScript pour écrire une fonction qui interagit avec les éléments HTML alors j'espérais pouvoir obtenir de l'aide. J'ai une image sur laquelle je clique. Je veux le déplacer de sa position actuelle vers la gauche ou vers la droite en fonction du dernier mouvement.

Par exemple, la première fois que l'utilisateur clique dessus, il se déplace vers la gauche, la seconde vers la droite et ainsi de suite. Voici le code html et css de l'élément:

La transformation est juste pour le centrage.

Voici le javascript que j'ai écrit jusqu'à maintenant; à ce moment rien ne se produit lorsque le div est cliqué:

var logo = document.getElementById('logo'); 
 
var dir = -1; 
 
var diff = 50; 
 

 
function toMove(){ 
 
    for(int i=0; i<diff; i++){ 
 
     logo.style.left += ""+ dir +"px"; 
 
     window.setTimeout(100); 
 
    } 
 
    dir = dir*-1; 
 
}

#logo { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div id="logo"> 
 
<a onclick="toMove()"> 
 
    <img src = "mypic.jpg"/> 
 
</a> 
 
</div>

La partie que je l'ai commenté était la première option que j'ai essayé qui ne fonctionne pas. Quelqu'un peut-il me dire quel est mon problème? Merci!

MISE À JOUR: Modifié le script à utiliser uniquement sur la fonction toMove() qui fonctionne sur la variable dir. Aussi modifié le HTML pour utiliser un wrapper autour de l'img pour appeler la fonction directement au lieu d'utiliser un actionlistener sur le div. En outre, je ne pense pas avoir très bien clarifié au départ, l'idée est de créer une transition en douceur à travers l'écran, plutôt que de simplement réinitialiser l'emplacement immédiatement. Le code ne fonctionne toujours pas, des suggestions?

Answer 1

vous pouvez utiliser la méthode getBoundingClientRect() pour obtenir la position gauche et essayer quelque chose comme ceci:

var logo = document.getElementById("logo"); 
 
var num = 1; 
 
var move = 40; 
 
var offsets = document.getElementById('logo').getBoundingClientRect(); 
 
logo.onclick = function() { 
 

 
    if (num < 0) 
 
    moveLeft(move); 
 

 
    else moveRight(move) 
 
} 
 

 

 
function moveLeft(n) { 
 
    logo.style.left = offsets.left - n + 'px'; 
 
    num = 1; 
 

 
} 
 

 
function moveRight(n) { 
 
    logo.style.left = offsets.left + n + 'px'; 
 
    num = -1; 
 
}

#logo { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #000; 
 
}

<div id="logo"> </div>