Hello,

I have just started learning js, and got stuck somewhere. I have created 4 buttons that can move the text below it left, right, up and down respectively.
But I am facing a problem, two buttons are just working once i.e left and up; and two buttons are not working at all i.e right and down. Here's my code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function moveTextLeft(side)
{
	var text = document.getElementById("moveable");
	switch(side)
	{
	case "left":
	text.style.marginLeft = "-10px";
	break;
	case "right":
	text.style.marginRight = "-10px";
	break;
	case "up":
	text.style.marginTop = "-10px";
	break;
	case "down":
	text.style.marginBottom = "-10px";
	break;
	}
}
</script>

</head>

<body>
<input id="move" value="move left" onclick="moveTextLeft('left');" type="button" />
<input id="move" value="move right" onclick="moveTextLeft('right');" type="button" />
<input id="move" value="move up" onclick="moveTextLeft('up');" type="button" />
<input id="move" value="move down" onclick="moveTextLeft('down');" type="button" />
<div id="moveable" style="margin-left: 100px; margin-right: 100px;">This textcan move</div>

</body>
</html>
Please help me out, I want that whenever the user clicks the button, no matter how many times, the text moves.