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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

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

jecommeraAuthor Commented:
Thanks however I get error

document.images is not a function
elementStyle = document.images("image1").style;
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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

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
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

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.
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
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.