Assign image to random number-range

Question

So, I've got my code ready to generate and print a random number between "-20 and 20".

What I'd like to do, and this is where I'm stuck, is to assign 4 different images to a number range between my total range of "-20 to 20".

For instance:

image1.gif would be assigned to any random # between "-20 and -10"
image2.gif assigned to "-9 and 0"
image3.gif to "1 and 10"
image4.gif to "11 and 20"

Any suggestions much welcomed!

EDIT: So based on Jon's answer, i've changed the last two lines to a document.write and am trying to get my actual images shown above the text output. I'm however aware of a faulty line in the IMG.SRC. What would this be needed to change to if my images were lying in my root dir? Thanks in advance.

<html>
<title>RANDOM IMAGE TO NUMBER RANGE</title>
<body>
<center>
<script language="javascript" type="text/javascript">
var ranges = [
    { from: 11, image: "image4.jpg" },
    { from: 1, image: "image3.jpg" },
    { from: -9, image: "image2.jpg" },
    { from: -20, image: "image1.jpg" }       
];

var random_num = (Math.round((Math.random()*41)+-20));
var image = "default";

for(var i = 0; i < ranges.length; ++i) {
    if(random_num >= ranges[i].from) {
        image = ranges[i].image;
        break;
    }
}
document.write("Number: " + random_num + " parts, " + " Imagetitle: = " + image);
document.write('<img src="'+ranges[image]+'">');

</script>
<br></br>
<div>
CLICK <a href="javascript:history.go(0);">REFRESH or F5</a> FOR A RANDOM IMAGE on NUMBER-RANGE.
</div>
</center>
</body>
</html>

What do you mean by assigning an image to a random number (i.e. how should they be linked)? It seems you'd have to change your formula to four different ones to generate numbers in the four ranges you describe. — pimvdb, Jan 15 '12 at 16:25
What about generating a number between 1 und 4 as all those intervals have the same size? — TimWolla, Jan 15 '12 at 16:29
How about you divide your number between -20 and 20 by 10 and then add 2? (Or add 20 and then divide by 10.) — Pointy, Jan 15 '12 at 16:33

score 0 · Accepted Answer · answered Jan 15 '12 at 16:34

0

Put the ranges inside an array and iterate over it to find which range you are in:

// IMPORTANT: array is sorted in descending "from" order!
var ranges = [
    { from: 11, image: "image4" },
    { from: 1, image: "image3" },
    { from: -9, image: "image2" },
    { from: -20, image: "image1" }       
];

var random_num = (Math.round((Math.random()*41)+-20));
var image = "default";

for(var i = 0; i < ranges.length; ++i) {
    if(random_num >= ranges[i].from) {
        image = ranges[i].image;
        break;
    }
}

alert("random_num = " + random_num + " / image = " + image);

This will work correctly for intervals that may or may not be equal, and can easily be adapted to slightly more complex interval definitions.

See it in action.

answered Jan 15 '12 at 16:34

Jon

428,835
81
738
806

Thanks alot everyone for your input! I found this specific code to be working for me spot on. How would I go about trying to change the alert popup to the showing of the actual images in the root dir though? i.e: "document.write('');" – fizd Jan 15 '12 at 17:58
@fizd: Something like `"images/" + ranges[i].image` for the path to the file. You should also use another method than `document.write` to show the image; see e.g. http://stackoverflow.com/questions/5451445/how-to-display-image-with-javascript – Jon Jan 15 '12 at 22:02

score 0 · Answer 2 · answered Jan 15 '12 at 16:35

0

Just call the function below 4 times with parameters (-20, -11), (-10, -1), (0, 9), (10, 19).

function get_rand_int(min, max) {

    return Math.floor(min + Math.random() * (max - min + 1));

} // get_rand_int()

answered Jan 15 '12 at 16:35

jgroenen

1,332
1
8
13

Assign image to random number-range

2 Answers2