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.
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: stackoverflow./a/21976204/3315914 – rpax Commented Mar 1, 2014 at 13:20
6 Answers
Reset to default 1ImageArray 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>
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>
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.
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>
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>
You must use ImageArray when assigning elements of the array:
ImageArray[0] = 'goat1.jpg';
instead of:
image[0] = 'goat1.jpg';
I would also remend 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">')
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745210973a4616836.html
评论列表（0条）