CODEWITHSUNDEEP
javascripthtml
Jacob Barrow
Jacob Barrow

Reputation: 691

Selecting a random image

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.

Upvotes: 1

Views: 9387

Answers (6)

Kevin Bowersox
Kevin Bowersox

Reputation: 94489

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">')
}

Upvotes: 0

Black Sheep
Black Sheep

Reputation: 6694

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>

Upvotes: 1

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

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>

Upvotes: 1

Suman Bogati
Suman Bogati

Reputation: 6349

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>

Upvotes: 0

ElDoRado1239
ElDoRado1239

Reputation: 4048

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>

Upvotes: 0

Joeytje50
Joeytje50

Reputation: 19112

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.

Upvotes: 0

Related Questions