从数组中随机生成图片和文字的脚本

Question

I'm essentially trying to set it up so that when I click a button on my site, the page refreshes with either a random piece of text from an array and a random image from an array. I've got the text part down, but need to know how to do the picture part. This is the script I'm using right now for the text generator:

<script language="JavaScript">
var r_text = new Array ();
r_text[0] = "You'll want to track-change your life";
r_text[1] = "A misplaced comma can get you fired";
r_text[2] = "Work-life balance? Ha!";
r_text[3] = "Even the bankers laugh at you";
r_text[4] = "There's a gym so you can't leave the building";
r_text[5] = "Student debt can't be discharged";
r_text[6] = "Sallie Mae becomes one of your biggest contacts";
r_text[7] = "Good luck with partner track";
r_text[8] = "There are no lifestyle firms";
r_text[9] = "Your soul will die";
r_text[10] = "Socratic Method? More like Suck-ratic Method";
r_text[11] = "So much paper. You'll be destroying rainforests";
var i = Math.floor(12*Math.random())
document.write(r_text[i]);
</script>

Any ideas on what I can do to get images in here?

Answer 1

var r_images = new Array (); 
r_images[0] = "a.jpg";
r_images[1] = "b.jpg;
.
.
.


var i = Math.floor(12*Math.random())
document.write(r_text[i]);
document.write("<img src='"+images_folder+r_images[i]+"' />");

Answer 2

just put img tags in the same array, so it mixes with text:

....
r_text[12] = "<img src='1.gif' />";
r_text[13] = "<img src='2.gif' />";
...

etc....

Answer 3

Can you do the same thing for an image?

var imageNames = ['life', 'fired', 'balance', 'bakers', 'gym']
var i = Math.floor(5*Math.random())
document.write("<img src='http://path/to/your/image/" + imageNames[i] + ".jpg'>");

Answer 4

set a folder for images and give them random name onward 12,13,14.......than same like text

var i = Math.floor(24*Math.random())
document.write("<img src='folder-path/" + r_text[i] + ".jpg'>");

Answer 5

I realize this is an old post, but for future readers, consider using innerHTML in lieu of document.write and also I recommend changing var i = Math.floor(12*Math.random()) to var i = Math.floor(r_text.length * Math.random()); that way as you add more images you don't have to worry about changing the number next to *Math.random())

In this example I've used Array objects so that you can easily define the alt text (for those validation sticklers) for each image.

For anyone that cares for a working example:

http://jsfiddle.net/GmZPe/3/

HTML

<div id="container"></div>

JS

var r_img = [];
r_img[0] = {
    source:
        "image01.png",
    altText:
        "image 01"
};
r_img[1] = {
    source:
        "image02.png",
    altText:
        "image 02"
};
r_img[2] = {
    source:
        "image03.png",
    altText:
        "image 03"
};

var i = Math.floor(r_img.length * Math.random());
var s = "<img src='http://tinyurl.com/ky3nmqp/" + r_img[i].source + "' alt='" + r_img[i].altText + "'>";
document.getElementById('container').innerHTML = s;

---

Or if you prefer, we can wrap it in a function call it when an event occurs:

http://jsfiddle.net/GmZPe/4/

HTML

<div id="container"></div>
<button onclick="myFunction()">Click me</button>

JS

function myFunction() {
    var r_img = [];
    r_img[0] = {
        source:
            "image01.png",
        altText:
            "image 01"
    };
    r_img[1] = {
        source:
            "image02.png",
        altText:
            "image 02"
    };
    r_img[2] = {
        source:
            "image03.png",
        altText:
            "image 03"
    };

    var i = Math.floor(r_img.length * Math.random());
    var s = "<img src='http://tinyurl.com/ky3nmqp/" + r_img[i].source + "' alt='" + r_img[i].altText + "'>";
document.getElementById('container').innerHTML = s;
}