Selecting a random image

Question

I've been trying to get a random image to show up on load. This is the code I'm using:

<head>
    <script type="text/javascript">
    ImageArray = new Array();
    image[0] = 'goat1.jpg';
    image[1] = 'kitchen4.jpg';
    image[2] = 'pig1.jpg';
    image[3] = 'site1.jpg';
    image[4] = 'site2.jpg';
    image[5] = 'site3.jpg';
    image[6] = 'site4.jpg';
    image[7] = 'site5.jpg';
    image[8] = 'site6.jpg';
    image[9] = 'site7.jpg';
    image[10] = 'site8.jpg';


function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>

I'm new to javascript, and cobbled this together from snippets I found on line.

The problem with this code is that it shows <img src="images/random/undefined" width="250px">, instead of an image.

Take a look to: http://stackoverflow.com/a/21976204/3315914 – rpax Mar 01 '14 at 13:20 — rpax, Mar 01 '14 at 13:20

Cilan · Accepted Answer · 2014-02-08T16:03:45.263

1

ImageArray has no items, so getting any index of it will return undefined. I think you are trying to set values of ImageArray, but accidentally put image. Second, you don't want textContent, you want innerHTML. This is probably the code you meant to have:

<head>
    <script type="text/javascript">
    ImageArray = new Array();
    ImageArray[0] = 'goat1.jpg';
    ImageArray[1] = 'kitchen4.jpg';
    ImageArray[2] = 'pig1.jpg';
    ImageArray[3] = 'site1.jpg';
    ImageArray[4] = 'site2.jpg';
    ImageArray[5] = 'site3.jpg';
    ImageArray[6] = 'site4.jpg';
    ImageArray[7] = 'site5.jpg';
    ImageArray[8] = 'site6.jpg';
    ImageArray[9] = 'site7.jpg';
    ImageArray[10] = 'site8.jpg';


function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>

edited Feb 08 '14 at 16:03

answered Feb 08 '14 at 15:55

Cilan

13,101
3
34
51

And second he will have to use innerHTML instead of textContent. – idmean Feb 08 '14 at 15:57
@wumm `textContent` works fine, doesn't it? It's like using jQuery's `.text()` instead of `.html()` - it works too, but `textContent` works for both HTML and XML files, while `innerHTML` only works for HTML. – Joeytje50 Feb 08 '14 at 15:59
@TheWobbuffet Exactly, but the OP is trying to reach "random image to show up on load" I don't think he wants to display HTML code. – idmean Feb 08 '14 at 16:02
@wumm Oh, I thought it had to do with entities for that. Well, answer updated – Cilan Feb 08 '14 at 16:04

Black Sheep · Answer 2 · 2014-02-08T16:04:38.793

You don't pass the array and change textContent to innerHTML ... SEE DEMO

<script type="text/javascript">
    ImageArray = new Array();
    ImageArray[0] = 'goat1.jpg';
    ImageArray[1] = 'kitchen4.jpg';
    ImageArray[2] = 'pig1.jpg';
    ImageArray[3] = 'site1.jpg';
    ImageArray[4] = 'site2.jpg';
    ImageArray[5] = 'site3.jpg';
    ImageArray[6] = 'site4.jpg';
    ImageArray[7] = 'site5.jpg';
    ImageArray[8] = 'site6.jpg';
    ImageArray[9] = 'site7.jpg';
    ImageArray[10] = 'site8.jpg';


function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>

score 0 · Answer 3 · answered Feb 08 '14 at 15:57

The problem is that you're not assigning the values of the array ImageArray, but the array image. You can change this by either renaming your image array to image, or the other way around. So:

<script type="text/javascript">
    var image = new Array();
    image[0] = 'goat1.jpg';
    image[1] = 'kitchen4.jpg';
    image[2] = 'pig1.jpg';
    image[3] = 'site1.jpg';
    image[4] = 'site2.jpg';
    image[5] = 'site3.jpg';
    image[6] = 'site4.jpg';
    image[7] = 'site5.jpg';
    image[8] = 'site6.jpg';
    image[9] = 'site7.jpg';
    image[10] = 'site8.jpg';


    function getRandomImage() {
        var num = Math.floor( Math.random() * 11);
        var img = image[num];
        document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

    }
</script>

OR:

<script type="text/javascript">
    var ImageArray = new Array();
    ImageArray[0] = 'goat1.jpg';
    ImageArray[1] = 'kitchen4.jpg';
    ImageArray[2] = 'pig1.jpg';
    ImageArray[3] = 'site1.jpg';
    ImageArray[4] = 'site2.jpg';
    ImageArray[5] = 'site3.jpg';
    ImageArray[6] = 'site4.jpg';
    ImageArray[7] = 'site5.jpg';
    ImageArray[8] = 'site6.jpg';
    ImageArray[9] = 'site7.jpg';
    ImageArray[10] = 'site8.jpg';


    function getRandomImage() {
        var num = Math.floor( Math.random() * 11);
        var img = ImageArray[num];
        document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

    }
</script>

The name of the variable you store your image names in needs to be consistent throughout the script.

Suman Bogati · Answer 4 · 2014-02-08T16:03:26.310

You should defined image an array but ImageArray, you can also reduce the code something like this

<head>
    <script type="text/javascript">
    var image = ['goat1.jpg', 'kitchen4.jpg', 'pig1.jpg', 
    'site1.jpg', 'site2.jpg', 'site3.jpg', 'site4.jpg', 'site5.jpg', 
    'site6.jpg', 'site7.jpg', 'site8.jpg']; 

function getRandomImage() {
    var num = Math.floor( Math.random() * 11);

    var img = image[num];
    document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>

Kevin Bowersox · Answer 5 · 2014-02-08T16:04:47.597

You must use ImageArray when assigning elements of the array:

ImageArray[0] = 'goat1.jpg';

instead of:

image[0] = 'goat1.jpg';

I would also recommend assigning the array at its declaration instead of using individual statements to assign values to different elements of the array:

var ImageArray = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg','site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg','site8.jpg'];

function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')
}

score 0 · Answer 6 · answered Feb 08 '14 at 16:00

Suggestion for changes:

var imgs = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg',
            'site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg',
            'site8.jpg'];
function getRandomImage(){
 var rnd = Math.floor(Math.random()*imgs.length);
 document.getElementById('randImage').src = imgs[rnd];
}
...
<div><img id="randImage" /></div>

Selecting a random image

6 Answers6