please see what is wrong with my JS code

Hi,

Practicing a little JS..

Please see what is wrong with my JS code below:
It is meant to move the image across the screen.

<html>
<head><title>Our Universe</title>
<script type="text/javascript">

var i=0;
var timeout;
var elementStyle = document.images("image1").style;
elementStyle.position = "relative";
elementStyle.left = "5px";

function driveCar() {

      while (i<100) {
            elementStyle.left = i+"px";
            i++;
            timeout = setTimeout("driveCar()",1500);
      
}
}


</script>
<body onload="driveCar();">

<img src="images.jpg" name="image1" id="image1" />


</body>
</html>
jecommeraAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
For one thing, you will not be able to access the image element from the head section until it has been rendered to the page. You could move your script block to somewhere below the image tag on the page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Robert SchuttSoftware EngineerCommented:
how about this:

<script type="text/javascript">

var i=0;
var timeout;
var elementStyle = null;

function driveCar() {

      if (!elementStyle)
      {
            elementStyle = document.images("image1").style;
            elementStyle.position = "relative";
            elementStyle.left = "5px";
      }

      if (i<1000) {
            elementStyle.left = i+"px";
            i++;
            timeout = setTimeout("driveCar();",100);
      }
}

</script>

Open in new window

0
jecommeraAuthor Commented:
Thanks however I get error

document.images is not a function
elementStyle = document.images("image1").style;
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tom BeckCommented:
Well, if we are doing complete re-writes then how about this:
<body onload="driveCar_init();">

<img src="images.jpg" name="image1" id="image1" />

<script type="text/javascript">
var i=0;
var timeout;
var elementStyle = document.getElementById("image1").style;
elementStyle.position = "relative";
elementStyle.left = "5px";

function driveCar() {
    elementStyle.left = i+"px";
    i++; 
}
function driveCar_init(){
    timeout = setInterval("driveCar()",500);
}
</script>
</body>

Open in new window

0
Tom BeckCommented:
document.images is a collection of all images on the page. Since you only have one, you could do this: document.images[0].style. Generally though it is more precise to select the element by id: document.getElementById("image1").style
0
Robert SchuttSoftware EngineerCommented:
wow, @tommyBoy, getting a bad vibe here, I was just trying to show that you can use a script in the head section.

To get back to you @jecommera: In my browser here it works with parentheses but maybe you need to use square brackets for 'normal' browsers:

elementStyle = document.images["image1"].style;

Open in new window

0
Tom BeckCommented:
Must be my fatherly instinct. When I see someone is trying to learn, I try to teach. Do it for them and they never learn. I have three very smart grown up children.
0
jecommeraAuthor Commented:
yes I am practicing JavaScript so any of these I raise is to learn more so than get a solution that works.<br /><br />Got load of explanations above which help<br /><br />thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.