javascript: moving an image

Question

editing this page for those who want to read this in the future :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.. >.>

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

here's my code:

<script type="text/javascript">

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

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

here's my CSS for the picture:

#ball
{
    position:absolute;
    top:500px;
    left:500px; 
}

SOLUTION(given by VIPIN JAIN): use .offsetLeft instead of element.style.left

Question 2:
EDIT: i fixed it with .offsetLeft 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 too much recursion. I know it happens because i'm using a recursion, but i wonder, what's wrong with using recursion?

here's my code:

<script type="text/javascript">

    <script type="text/javascript">

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

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

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

can someone help me with this? thanks :)

SOLUTION(given by Teemu): please refer to Teemu's comment below on 'Edit II' part.

Question 3(actually i'm asking it on the comments :P)
when i tried to set the image position using document.getElementById('ball').offsetLeft-=1;, it shows an undefined value.

SOLUTION(given by Kemal Fadillah): "That's because you can't set the offsetLeft value of an element. You have to set the new position value to .style.left. Something like this: element.style.left = new_value + "px";"

Question 4(again, i'm asking it on the comments :P)
it seems that the image won't move smoothly(it looks like it is suddenly "warps" to another place). i have raised the speed value but it still not working. am i missing something with it? i wonder.. :/

SOLUTION(given by Kemal Fadillah): "Set speed 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."

Answer 1

You should use jQuery, it's much easier. Try something like

$(function(){
$("img#ball").offset({top: 10px, left: 500px});
});

More information can be found here:

http://api.jquery.com/offset/

information about jQuery in general can be found here:

http://jquery.com/

Answer 2

This requires offsetLeft and offsetTop values please refer to the link

This post

Answer 3

document.getElementById('ball').style.left returns '' (or undefined), if you haven't set the property before retrieving it. That's why you get NaN from parseInt().

Edit:

Seems you're style definition is OK (after you edited your post). You can try to use the radix in the parseInt():

alert(parseInt(document.getElementById('ball').style.left,10));

This is documentated as not oblique, but using it sometimes helps.

Edit II

This happens, because you're executing all setTimeouts twice, and you're not clearing them. Try it this way:

var delay;

function moveLeft(){
  :
  if(delay){ // Add this if before all of your setTimeout() calls and in gameover() too
    clearTimeout(delay);
  }
  delay=setTimeout(moveLeft, speed);
  :
}

By setting timeout like this setTimeout(doFunction(),delaytime); executes doFunction rightaway because of (), and again after delaytime, that really is too much of recursion...

Answer 4

You can't get the CSS styling by using element.style if it's declared inside an external stylesheet. From MDN Documentation:

However, it is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets.

https://developer.mozilla.org/en/DOM/element.style

Instead, you'll have to use window.getComputedStyle() to get the properties.

window.getComputedStyle(document.getElementById('ball')).left; // returns 500px