Display images from an array

Question

I am trying to display six images from a javascript array. Running the code below I get no results it simply seems to be not working. I have no idea where my fault is.

Here is the javascript code:

var backgroundImage = new Array(); 
backgroundImage[0] = "images/colors-wallpaper.jpg";
backgroundImage[1] = "images/florida-birds.jpg";
backgroundImage[2] = "images/focus-on-life.jpg";
backgroundImage[3] = "images/set-into-life.jpg";
backgroundImage[4] = "images/dandelion.jpg";
backgroundImage[5] = "images/flowers.jpg";
backgroundImage[5] = "images/flowers.jpg";

function displayAllImages() {
// Here has to be some error!!! //
 for (i=0;i<backgroundImage.length;i++) {
    document.write("<li><img src='" + backgroundImage[i] + "' width="160" height="120"/><span>" + backgroundImage[i] + "</span></li>");
}
}

And that's my html code:

<html>
<head>
    <script type="text/javaScript" src="changebackground.js"></script>
</head>
<body>

<div id="container">

    <div class="backgoundImage">
    <ul>
        <script>displayAllImages();</script>
    </ul>
    </div>

</div>

</body>
</html>

I get the error Uncaught ReferenceError: displayAllImages is not defined (anonymous function)! What's the reason?? — Philipp Braun, Apr 12 '12 at 10:58
@Philipp Braun: Cause you have syntax error in this function (see my answer, you should change the quotes and this should help you). — SlavaNov, Apr 12 '12 at 11:00

score 5 · Accepted Answer · answered Apr 12 '12 at 10:53

5

Change

width="160" height="120"

to

width='160' height='120'

In

document.write("<li><img src='" + backgroundImage[i] + "' width="160" height="120"/><span>" + backgroundImage[i] + "</span></li>");

You are using wrong quotation marks

answered Apr 12 '12 at 10:53

SlavaNov

2,447
1
18
26

score 2 · Answer 2 · answered Apr 12 '12 at 10:54

2

Your last array item key should be 6 (also I reckon as same value it's a copy/paste error) and I would strongly recommend against using document.write for such thing. Check link to see what I think you want to achieve but done in a slightly cleaner way (demo using jQuery just for the dom ready handling)

http://jsfiddle.net/UnFUB/

answered Apr 12 '12 at 10:54

GillesC

10,647
3
40
55

The only one sane enough to no use `document.write`. – Madara's Ghost Apr 07 '15 at 08:38

score 0 · Answer 3 · answered Apr 12 '12 at 10:54

0

You need to escape your double quotes, see below:

document.write("<li><img src='" + backgroundImage[i] + "' width=\"160\" height=\"120\"/><span>" + backgroundImage[i] + "</span></li>");

answered Apr 12 '12 at 10:54

James Zaghini

3,895
4
45
61

score -1 · Answer 4 · answered Apr 12 '12 at 10:55

document.write("<li><img src='" + backgroundImage[i] + "' width='160' height='120'/><span>" + backgroundImage[i] + "</span></li>");

You have a mistake in quotes. But better do not use document.write The beeter way is to create an element in memory, and then put it in this block. How it looks on jQuery

Display images from an array

4 Answers4

Linked