Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 222
  • Last Modified:

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>
0
jecommera
Asked:
jecommera
  • 4
  • 2
  • 2
4 Solutions
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now