javascript onclickでhtml要素を前後に移動

Question

JavaScriptを使用してHTML要素とやり取りする関数を作成したことがないので、私はいくつかの助けを得ることができたと思っています。 私はクリックされる画像を持っています。私は、それが最後にどのように動いたかに応じて、現在の位置から左または右に移動したい。

たとえば、最初にクリックすると左に移動し、2番目が右に移動するなどします。要素のhtmlコードとcssコードは次のとおりです。

トランスフォームはセンタリング用です。

これまでに書いたJavaScriptがあります。 div要素をクリックしたときに、この時点では何も起こりません：

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>

私がコメントアウトしている部分が機能しなかった私が試した最初のオプションでした。誰も私の問題が何であるか教えていただけますか？ ありがとうございます！

更新： dir変数で動作する関数toMove（）でのみ使用するようにスクリプトを編集しました。また、divでactionlistenerを使用する代わりにimgのラッパーを使用して直接関数を呼び出すようにHTMLを修正しました。また、私は最初は非常にうまく説明したとは思えません。単に、ただちに場所をリセットするのではなく、画面をスムーズに移行させることです。コードはまだ動作しません、任意の提案？

Answer 1

あなたは左の位置を取得し、このような何かをしようとするgetBoundingClientRect（）メソッドを使用することができます。ここで `{`

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>