Log in

View Full Version : document.getElementById('player').style.left;


ob1wan
02-08-2006, 12:10 AM
<html>
<head>
<title>movement</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function left(){
var x=document.getElementById('player').style.left;
alert(x);
document.getElementById('player').style.left ='1';
}
//-->
</script>
</head>
<body>
<div id="player" style="position:relative; width:44; height:46; z-index:1; left: 279; top: 132;"><img src="tiles/mark.gif" width="44" height="46"></div>
<input type="button" onMouseDown="javascript:left()" name="Submit" value="Submit">
</body>
</html>

im tring to move an image in a layer with a push of a button
what i want it to do is be able to move 5pixels from where it was last at a push not jump to a spot
when i do an alert test it returns the number with px at the end and i cant use += / -= to do anything with
thanx for any help
jscheuer1
02-08-2006, 09:33 AM
Well, as you can see, the browser (in your case) adds 'px' to the style left, even if you do not. It is required to use units (in the body HTML markup as well as javascript code) anyway, to be valid with most DOCTYPEs. So use them. Otherwise, some browsers may not interpret them as pixels or (more likely) at all. This is a job for parseInt() (as long as you know you will be at all times working with positive values for the element's left position):


function left(){
var x=parseInt(document.getElementById('player').style.left);
alert(x);
document.getElementById('player').style.left=x+5+'px';
}

Or, more simply:


function left(){
document.getElementById('player').style.left=parseInt(document.getElementById('player').style.left)+5+'px';
}

Also, it is good to use more descriptive names for your functions and ones that can never be confused with words that have other predefined uses in either javascript or HTML. Since the net result of the above operation will be to move the object 5 pixels to the right, why not call the function:

moveRight()
ob1wan
02-09-2006, 03:25 PM
what happens when it goes to a negative?
jscheuer1
02-09-2006, 06:18 PM
what happens when it goes to a negative?

Nothing bad, sorry my mistake, I was thinking of someting else (Math.abs()).
ob1wan
02-09-2006, 07:54 PM
im trying to make a rpg game with javascript and php
i was tring to find a way to get it to hold the image spot if they refreshed for any reason.
what i came up with was two text boxes that are disabled and it shows the left position and the top position.
i also set a button while it is selected gets the keys pressed and i set up 8 keys to move.
im woundering how well this stands up for programing... if its ****y or cause problems in the long run or if its an okay idea
jscheuer1
02-09-2006, 08:51 PM
Sounds reasonable, if it works.