"getElementById"をループ内で使用する方法は？ループ内で、次のHTML DOMを使用しようと

Question

- 私：

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; 
} 

その後#someIDに.moveitクラスを追加します。

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>

簡単な例があります。

願っています。