javascript: moving an image
<p><strong>editing this page for those who want to read this in the future :P</strong></p>

<p>seems i'm asking too much here.. but thanks a lot for those who helps me with this problem ! actually i want to accept all of your answer, but it seems i only can accept one.. >.>
<br/><br/></p>

<p><strong>Question 1:</strong><br/>
i want to move an image, but when i try to get the image position(using <code>document.getElementById().style.left</code>), it shows me a <em>NaN value</em> when i convert it to integer. i wonder how to fix this :/</p>

<p>here's my code:</p>

<pre><code>&lt;script type="text/javascript"&gt;

    function playit()
    {
        alert(parseInt(document.getElementById('ball').style.left)); &lt;!-- shows a NaN value --&gt;
    }
&lt;/script&gt;
</code></pre>

<p>i put the image into table and call it using onclick function; <code>&lt;td id="frame" colspan="5" onclick="playit()"&gt;</code> to be exact and i declared the image like this: <code>&lt;img src="play/ball.png" id="ball" name="ball"/&gt;</code></p>

<p>here's my CSS for the picture:</p>

<pre><code>#ball
{
    position:absolute;
    top:500px;
    left:500px; 
}
</code></pre>

<p><strong>SOLUTION(given by <a href="http://stackoverflow.com/users/1128293/vipin-jain">VIPIN JAIN</a>):</strong> use <code>.offsetLeft</code> instead of <code>element.style.left</code></p>

<p><br/><br/><br/>
<strong>Question 2:</strong> <br/>
<strong>EDIT:</strong>
i fixed it with <code>.offsetLeft</code> and it works just fine. now when i'm trying to move the image, i got another error. It's said that i'm using <em>too much recursion</em>. I know it happens because i'm using a recursion, but i wonder, what's wrong with using recursion? </p>

<p>here's my code:</p>

<pre><code>&lt;script type="text/javascript"&gt;

    &lt;script type="text/javascript"&gt;

    var lball = document.getElementById('ball').offsetLeft;
    var speed = 500;

    function moveleft()
    {
        if(document.getElementById('ball').offsetLeft &gt;0)
        {
            document.getElementById('ball').offsetLeft-=1;

            setTimeout(moveleft(), speed);
        }
        else gameover();
    }
    function playit()
    {
        score = 0;
        setTimeout(moveleft(), speed);
    }
&lt;/script&gt;
</code></pre>

<p>can someone help me with this? thanks :)
<br/><br/>
<strong>SOLUTION(given by <a href="http://stackoverflow.com/users/1169519/teemu">Teemu</a>):</strong> <em>please refer to <a href="http://stackoverflow.com/a/10173310/1334588">Teemu's comment</a> below on '<strong>Edit II</strong>' part.</em>
<br/><br/><br/></p>

<p><strong>Question 3(actually i'm asking it on the comments :P)</strong> <br/>
when i tried to set the image position using <code>document.getElementById('ball').offsetLeft-=1;</code>, it shows an <em>undefined value</em>.
<br/><br/>
<strong>SOLUTION(given by <a href="http://stackoverflow.com/users/732470/kemal-fadillah">Kemal Fadillah</a>):</strong> "That's because you can't set the <code>offsetLeft</code> value of an element. You have to set the new position value to <code>.style.left</code>. Something like this: <code>element.style.left = new_value + "px";</code>"
<br/><br/><br/></p>

<p><strong>Question 4(again, i'm asking it on the comments :P)</strong> <br/>
it seems that <em>the image won't move smoothly</em>(it looks like it is suddenly "warps" to another place). i have raised the <code>speed</code> value but it still not working. am i missing something with it? i wonder.. :/ 
<br/><br/>
<strong>SOLUTION(given by <a href="http://stackoverflow.com/users/732470/kemal-fadillah">Kemal Fadillah</a>):</strong> "Set <code>speed</code> to 10 or 20. That should make the animation smooth enough. To make the image moves faster, instead of decreasing the left offset by 1, try to decrease it by 3."</p>
