使用Javascript移动div无法正常工作

Question

I have some javascript that should move my div element every 400 milliseconds. From debugging I have found that all my code works except when I go to move the div element. Ie, this code:

block.style.left = xPos[index] + "px";

I am unsure why this code doesn't move my div? Should I use a different method (other than object.style.top etc.) to move my div?

My java script:

<script LANGUAGE="JavaScript" type = "text/javascript">
<!--
    var block         = null;
    var clockStep     = null;
    var index         = 0;
    var maxIndex      = 6;
    var x             = 0;
    var y             = 0;
    var timerInterval = 400;  // milliseconds
    var xPos          = null;
    var yPos          = null;

    function moveBlock()
    {
        //alert( index ); // if you use this you will see my setInterval works fine
        if ( index < 0 || index >= maxIndex || block === null || clockStep === null ) 
        { 
            clearInterval( clockStep );
            clockStep = null;
            return;
        }

        block.innerHTML = "yellow";            // this works (just a debug test) so I know block points to the correct HTML element
        block.style.left = xPos[index] + "px"; // this doesn't work
        block.style.top  = yPos[index] + "px";
        index++;
    }

    function onBlockClick( blockID )
    {
        if ( clockStep !== null )
        {
            return;
        }

        block = document.getElementById( blockID ); 
        index = 0; 
        x     = parseInt( block.style.left, 10 );
        y     = parseInt( block.style.top, 10 ); 
        xPos  = new Array( x+10, x+20, x+30, x+40, x+50, x+60 );
        yPos  = new Array( y-10, y-20, y-30, y-40, y-50, y-60 );

        clockStep = setInterval( "moveBlock()", timerInterval );
    }
-->
</script>

Answer 1

The value of block.style.left and block.style.top is not set unless you use an absolutely-positioned div with preset values for both left and top (in fact, your array is filled with NaN when I tested). For instance, the code works fine with a div defined like this:

<div id="div1" style="position:absolute;left:100px;top:100px;
        width:150px;height:150px;background-color:yellow;"
    onclick="onBlockClick(this.id);">
HI
</div>