Debugging a simple function

JavaScript
1

Hello guys,

I’m trying to attempt a simple animation, as indicated by the following code.
The intention is to move the object (a paragraph element node with id message) to the right by 200 px and down 100 px, by 1 px a second.

However, there seems to be a bug or my methodology is incomplete as the browser returns the Textvalue of the paragraph without any styling.

function moveMessage()
 {
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
var elem = document.getElementById("message");
var xpos = parseInt(elem.style.left);
var ypos= parseInt(elem.style.top);
if (xpos == 200 && ypos == 100)
{ 
return true;
}
if (xpos < 200)
 {
xpos++;
}
if (xpos > 200) 
{
xpos--;
}
if (ypos < 100) 
{
ypos++;
}
if (ypos > 100) 
{
ypos--;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
movement = setTimeout("moveMessage()",10);
 }
2

This makes no sense to me. How does the browser “return” something?

Anyway:
make sure you give the element a css position, like absolute.
make sure elem.style.left and top have a value. parseInt() can return NaN when it fails, and setting elem.style.left = “NaNpx” is not going to work well :slight_smile: