Picking a random img from an array to show when a img is clicked

Question

I came op with a java script like this.

<script>
function pickimg2() {
var imagenumber = 19;
  var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array;
images[0] = "2_of_clubs.png";
images[1] = "2_of_diamonds.png";
images[2] = "2_of_hearts.png";
images[3] = "2_of_spades.png";
images[4] = "3_of_clubs.png";
images[5] = "3_of_diamonds.png";
images[6] = "3_of_hearts.png";
images[7] = "3_of_spades.png";
images[8] = "4_of_clubs.png";
images[9] = "4_of_diamonds.png";
images[10] = "4_of_hearts.png";
images[11] = "4_of_spades.png";
images[12] = "5_of_clubs.png";
images[13] = "5_of_diamonds.png";
images[14] = "5_of_hearts.png";
images[15] = "5_of_spades.png";
images[16] = "6_of_clubs.png";
images[17] = "6_of_diamonds.png";
images[18] = "6_of_hearts.png";
images[19] = "6_of_spades.png";
images[20] = "6_of_clubs.png";
images[21] = "6_of_diamonds.png";
images[22] = "6_of_hearts.png";
images[23] = "6_of_spades.png";
  var image = images[rand1];
  document.randimg.src = image;
}

For a live demo

https://jsfiddle.net/0d2u525x/

Then i tried to use this HTML code.

<body onload="pickimg2">
<a href=""onClick="pickimg();return false;"><img src="BicycleBlue.jpg" name="randimg" border=0></a>
<input id="clickMe" type="button" value="clickme" onclick="doFunction();">
</input>
</body>


https://jsfiddle.net/0d2u525x/

How could i make this work, this is supposed to work with a full card set consisting of 67 cards, so if you could help me out, with the code, so that it is set to taht imagenumber, it would be a hughe help, i am ofcourse going to add the last images my self. ?

Welcome to Stack Overflow! Please provide all relevant code in an [mcve] in the question itself, not only on a third-party site. — Heretic Monkey, Mar 10 '17 at 21:04

score 0 · Answer 1 · answered Mar 10 '17 at 20:53

0

Math.Random generates a float between 0 and 1 and that is not what you need here. Since you have total 24 images, Try this

 var randomnumber = Math.Floor(Math.random()*24);

answered Mar 10 '17 at 20:53

CaptainHere

698
6
14

Dominique Fortin · Answer 2 · 2017-03-10T21:31:10.997

Try this

var images = 
      ["2_of_clubs.png", "2_of_diamonds.png", "2_of_hearts.png", "2_of_spades.png"
      ,"3_of_clubs.png", "3_of_diamonds.png", "3_of_hearts.png", "3_of_spades.png"
      ,"4_of_clubs.png", "4_of_diamonds.png", "4_of_hearts.png", "4_of_spades.png"
      ,"5_of_clubs.png", "5_of_diamonds.png", "5_of_hearts.png", "5_of_spades.png"
      ,"6_of_clubs.png", "6_of_diamonds.png", "6_of_hearts.png", "6_of_spades.png"
      ,"7_of_clubs.png", "7_of_diamonds.png", "7_of_hearts.png", "7_of_spades.png"
      ,"8_of_clubs.png", "8_of_diamonds.png", "8_of_hearts.png", "8_of_spades.png"
      ,"9_of_clubs.png", "9_of_diamonds.png", "9_of_hearts.png", "9_of_spades.png"];

    function pickimg2() {
      var imagenumber = images.length;
      var randomnumber = Math.random();
      var rand1 = Math.floor(imagenumber*randomnumber);
      var image = images[rand1];
      document.randimg.src = image;
      document.randimg.alt = image;
      document.getElementById("imageName").innerHTML = image;
    }

<img src="BicycleBlue.jpg" name="randimg" border=0>
 <p id="imageName"></p>
    <input id="clickMe" type="button" value="clickme" onclick="pickimg2();"/>

Edit: The first problem with your code is the images array. There are many ways to initialize an array, but the simplest is in literal form like this:

var arr = [0,3,5,6];

Also if you are going to reuse that array it should be defined outside of your function pickimg2.

Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See [this Meta question and its answers](http://meta.stackoverflow.com/q/256359/215552) for more information. — Heretic Monkey, Mar 10 '17 at 21:07
Thanks, this doesnt aplly to my image, it is not clicable, instead it makes a new button element, which also is doing nothing — Jonas Beck, Mar 10 '17 at 21:20
@JonasBeck I copied your code. It's just a proof of concept since I can't show the images you have, but the _alt_ property changes to show the name of the images. And it works. — Dominique Fortin, Mar 10 '17 at 21:24
@JonasBeck _this doesnt aplly to my image_ Just move `onclick="pickimg2();` to the `img` tag. — Dominique Fortin, Mar 10 '17 at 21:41

Picking a random img from an array to show when a img is clicked

2 Answers2