javascript - ループ内で「getElementById」を使用するには?

Question

ループ内で次の html DOM を使用しようとしています。

document.getElementById('someID').style.marginLeft = mov + "%";

ユーザーがボタンをクリックしたときにdivに動きを与えるためにこれを行いたいです。「mov」は変数ですが、機能しません。

どうすれば達成できますか？

皆さん、ありがとうございました。

Answer 1

CSS を使用する

#someID {
    margin-left: 100px;
    transition: 1s ease-out;
}
#someID.moveit {
    margin-left: 500px;
    transition: 1s ease-out;
}

次に、クリックが発生したときに.moveitクラスを追加します。#someID

Answer 2

var pos = 50;

setInterval(function(){
  document.getElementById("someID").style.left=pos+"%";
},200);

document.body.onclick=function(e){
  pos = e.pageX/10 // window.innerWidth;
}

#someID{
  position:absolute;
  top:10%;
  left:50%;
  background-color:red;
  width:50px;
  height:50px;
}

body{
  height:800px;  
}

<div id="someID">  </div>

簡単な例があります。

それが役に立てば幸い。