0

I just can't get my separate JavaScript file to work with my XHTML file. I want to change a picture in the HTML file using JavaScript, so I wrote the following code:

var image = new Array()
image[0] = "image0.jpg";
image[1] = "image1.jpg";
image[2] = "image2.jpg";
image[3] = "image3.jpg";

var demo = function() {
    document.getElementById("slide").src = image[1];
}

demo();

and in my HTML file I have

<head>
<title>Webdesign Tutorial</title>
<link rel="stylesheet" type="text/css" href="Home page.css">
<script type="text/javascript" src="ImagesSlide.js"></script>
</head>
<body>
    <p><img id="slide" src="image0.jpg" width="500" height="300" name="slide" /></p>
</body>

All the file names are right, and when I put the "document.get...." line into script tags in my HTML file, it does change the image.

Domenic
  • 100,627
  • 39
  • 205
  • 257
user3601646
  • 23
  • 2
  • 1
    The ` – cookie monster May 04 '14 at 15:32
  • Where should I put the script tag then? at the bottom of the body tag? I read online that it didn't matter if a – user3601646 May 04 '14 at 15:36
  • when i try to look at the hard to find api of the script ff tells me it's unsecure
    why did u choose this script - and yes - below the body     – Pika May 04 '14 at 15:38
  • I am new to StackOverflow, I dont know what you mean by looking at the hard of the api – user3601646 May 04 '14 at 15:48

1 Answers1

0

As pointed out you have to listen for the document ready event.

The basis concept is that your demo function is called at the moment that your browser interprets the javascript in the tags. In your case this is before the DOM objects you refer to are even present.

What will temporarily help as well is putting you script tags at the end of your document (just before ).

Or you can change you javascript to: 

var image = new Array()
image[0] = "image0.jpg";
image[1] = "image1.jpg";
image[2] = "image2.jpg";
image[3] = "image3.jpg";

var demo = function() {
    document.getElementById("slide").src = image[1];
}

window.onload = demo;

Mind you that this might not be 100% cross browser compatible. Usually jQuery is a great way to not have to bother with cross browser issues, thought it comes at the cost of size and not learning proper javascript when you don't put the effort in to do so.

I have made an example for you here:

http://jsbin.com/yoguhayi/1/edit

Mosselman
  • 1,648
  • 14
  • 26
  • Thank you for your answers! I have tried both suggestions and the picture still isn't changing :S – user3601646 May 04 '14 at 15:41
  • @user3601646 I have created an example jsbin which shows it working. – Mosselman May 04 '14 at 15:52
  • @user3601646 I edited the answer and added the link. – Mosselman May 04 '14 at 15:57
  • There's no such thing as a "ready" event in the native API. The `document.onready` isn't valid in any browser. You seem to be taking non-standard jQuery stuff and assuming it has some basis on actual standards. – cookie monster May 04 '14 at 16:11
  • @cookiemonster works fine for me. But so does window.onload which I have added in the example. Thanks for pointing it out. – Mosselman May 04 '14 at 16:14
  • @Mosselman: If `document.onready` works fine for you, then you're doing something else to make it run. As you can see here, it doesn't work. http://jsbin.com/yoguhayi/5/edit – cookie monster May 04 '14 at 16:18
  • *"What will temporarily help as well is putting you script tags at the end..."* Why temporarily? That's a good, valid solution to use, and is lighter and simpler than using a library solution like jQuery's `.ready()`. – cookie monster May 04 '14 at 16:19
  • @cookiemonster temporarily because for this purpose of replacing an image onload it is fine to put the script at the end. Since `user3601646` seems to be practicing with javascript it might be a good idea to practice with different ways of starting his scripts as well since there could be cases where you don't control where the script is included, etc. Never hurts to learn. – Mosselman May 04 '14 at 16:25
  • 1
    I completely agree that it's good to know different ways. Just wouldn't discount that approach. Often the simplest solutions are arguably the best. – cookie monster May 04 '14 at 16:31
  • @user3601646 Did any of this work for you? – Mosselman May 05 '14 at 07:35