Why Won't My Div Move?

Question

I am trying to get this fat div on some moving, but it won't! Help!

<script>

do {
 setTimeout(fly(), 10)
  function fly() {
   var i = 0;
      var left = parseInt(document.getElementById("dick").style.left);
   var top = parseInt(document.getElementById("dick").style.top);
   left++;
   top++;
   document.getElementById("dick").style.left = left + "px";
   document.getElementById("dick").style.top = top + "px"; 
 } 
}

while (i = 0);
</script>

<div id="dick" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:#000000;"></div>

"i" is not in the scope of the do...while – user627283 Aug 25 '15 at 19:41 — user627283, Aug 25 '15 at 19:41

score 3 · Accepted Answer · answered Aug 25 '15 at 19:40

3

You should use setInterval instead of setTimeout. Also you should give the setInterval your function instead of giving it the result of it being called.

    setInterval(fly, 10);
    function fly() {
      console.log("flying")
        var i = 0;
        var left = parseInt(document.getElementById("dick").style.left);
        var top = parseInt(document.getElementById("dick").style.top);
        left++;
        top++;
        document.getElementById("dick").style.left = left + "px";
        document.getElementById("dick").style.top = top + "px"; 
}

check this plunkr http://plnkr.co/edit/L3cid26ybpFYITfjUbmP?p=preview

answered Aug 25 '15 at 19:40

toskv

30,680
7
72
74

Whoa, how does the dick keep moving, I can't see any `while`etc! – JakeTheSnake Aug 25 '15 at 19:43
the while there doesn't do anything, it should be removed. – toskv Aug 25 '15 at 19:45
Ooh okay I see, the `setInterval` keeps doing stuff every, in this case, 10ms! – JakeTheSnake Aug 25 '15 at 19:47

score 1 · Answer 2 · answered Aug 25 '15 at 19:39

Because the code is full of logical mistakes.

setInterval(fly, 100);

function fly() {
    var i = 0,
        el = document.getElementById("dick"),
        left = parseInt(el.style.left),
        top = parseInt(el.style.top);

 el.style.left = ++left + "px";
 el.style.top = ++top + "px"; 
}

<div id="dick" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:#000000;"></div>

score 1 · Answer 3 · answered Aug 25 '15 at 19:45

The way it is now, you should see this in the console:

Uncaught TypeError: Cannot read property 'style' of null

First, move your script afterwards the <body> tag;

Then, try coding something like this, instead:

function fly() {
        var left = parseInt(document.getElementById("dick").style.left);
        var top = parseInt(document.getElementById("dick").style.top);
        left++;
        top++;
        document.getElementById("dick").style.left = left + "px";
        document.getElementById("dick").style.top = top + "px";
        //nsole.log(left+" and "+top);
    }

    var T_TIME = 200; // ms
    var intHandler = window.setInterval("fly()", T_TIME);

You better use setInverval() instead of a setTimeout with a loop.

Why Won't My Div Move?

3 Answers3