如何在循環內使用「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>

有一個簡單的例子。

希望它有幫助。