Moving Image

[garyblackpool]

Hi i am trying to move an image forward and back but it does not seem to be working.Could some one help cheers,

var moveTo= 150;var moveBack = 50;var x = 5;     function moveCar() {         pic =document.getElementById('car').style.left;    {	if(pic!=moveTo) {document.getElementById('car').style.left = x + "px"}          if(pic !=moveBack) {document.getElementById('car').style.left = x - "px"}             }                      window.setTimeout(moveCar,1500);           }

[Ingolme]

There are a whole lot of problems in the script. The first one is this:document.getElementById('car').style.left;This is either going to return an empty string (""), or it will return a number with "px" appended at the end, such as "123px". Therefore, it is never going to be equal to 150 or to 50 and there's no point in comparing them.Second problem:x - "px"This mathematical operation is impossible. The computer can't subtract a string from a number, it will return a number. It's like asking somebody to subtract "apple" from 5.Third problem:xYou're never changing the vaue of x at any moment. It's always 5 at every instant. Even if you assign that to the position of the object you're trying to move, it's not ever going to change its position.The whole script doesn't really do anything. You're going to have to start over and think of how the problem needs to be solved. Look up the word algorithm and try to build one that does what you're trying to do.

[justsomeguy]

Could some one help cheers

Cheers!

[garyblackpool]

Well i am trying to make my own functions without ripping tutorials but defo not working.now i am gettingmissing ; before statement and gocar() is not defined. grr back to bookscheers

var x = 5;var y = 700;var z = 10;     function gocar()     {         if (x < y;(z++ )) {              document.getElementById('car').style.left='x'px;                          {        window.setTimeout(moveimg,100);}}}

[jeffman]

What were you trying to do here:if (x < y;(z++ ))?Get rid of the semicolon and the internal parens. Put z++ inside the {curly braces}. Any syntax error inside a function will keep the function from being defined.style.left='x'px; -- go back to x + "px" -- except it shouldn't be x, right? x never changes. It's always 5.window.setTimeout(moveimg,100); -- didn't you want the time out to call the same function over and over? So setTimeout should be calling goCar() ? Or is moveimg really a different function? If so, why?

[dsonesuk]

instead of 'pic =document.getElementById('car').style.left;'use pic =document.getElementById('car').offsetLeft;but you have to allow for margins, padding, borders as these will be included in the value provided by offsetLeft.You will have to identify, which direction to work to, while doing the calculation to move the image.do not use !=, but <= and >=, so when the value is equal , over or lower than (depending on current direction the image is moving), change to move in the opposite direction, and now use specific calculation to move image in required direction.

[dsonesuk]

here you go<script type="text/javascript">/*<![CDATA[*//*---->*/var moveTox= 150;var moveBack = 50;var x = 5;var direction = 0;function moveCar() { pic =document.getElementById('car').offsetLeft; if(direction==0) { if(pic<=moveTox) { document.getElementById('car').style.left = ((pic+x)-8) + "px"; //8 relates to 8px added on by margin etc } else { direction=1; } } if(direction==1) { if(pic>=moveBack) { document.getElementById('car').style.left = ((pic-x)-8) + "px"; //8 relates to 8px added on by margin etc } else { direction=0; } }setTimeout(moveCar,150); }window.onload=moveCar;/*--*//*]]>*/</script> <style type="text/css">#car{position:relative; left:50px;}</style>

[garyblackpool]

Well i have now managed to get the image to managed to make it move forward. But now i am trying to make it move back- its not working. a if statement would not do it?Thanks.

x = 100; y = 500; m = 20; function moveCar(){ if(x< y)  { x += m ;  {   document.getElementById('car').style.left = x+'px';    } window.setTimeout('moveCar()',100);      }       } 

[jeffman]

1. Your variable names could be more explicit. We call this self-commenting code.2. Indents and curly braces could make a little more sense. Extra curly braces do nothing and just confuse things.3. You need to complete your if concept with an else clause.4. It's useful to remember that 1 * number = number. You'll see what I mean below.

var myPosition = 0;var boundary = 500;var increment = 10;var direction = 1;function moveCar() {	if (myPosition < boundary) {		direction = 1;		boundary = 500;	} else {		direction = -1;		boundary = 0;	}	myPosition += (direction * increment); 	document.getElementById('car').style.left = myPosition + 'px';	window.setTimeout(moveCar, 20);}			window.onload = moveCar;

Note. I changed the speed to suit me and my system. You can certainly change it back.