Randomly choose img between foldersl in html

Question

I have a huge code to programe and I'm stuck.

I'm doing a game with 4 documents: html, css, javascript and jquery. The game it's about trying to guess 20 different countries of the world with different images. I'm stuck at the point that I don't know what do I have to do so every turn of the game it automaticaly choose between the pictures. Also, it has only to display the first picture, and if the player clicks on the button to get a hint, then the other pictures start to show.

I have all the images organized by this: img/ img/countryname/ img/countryname/countryname01.jpg img/countryname/countryname02.jpg img/countryname/countryname03.jpg img/countryname/countryname04.jpg

On my html document I created a the following div:

<pre>
<div id="country">
    <div id="hint0">
        <!--choose randomly "img/countryname/countryname01.jpg"-->
    </div>
    <div id="hint1" class="hint" style="display: none">
        <!--choose randomly "img/countryname/countryname02.jpg"-->
    </div>
    <div id="pista2" class="pista" style="display: none">
        <!--choose randomly "img/countryname/countryname03.jpg"-->
    </div>
    <div id="pista3" class="pista" style="display: none">
        <!--choose randomly "img/countryname/countryname03.jpg"-->
    </div>
</div>
</pre>

Take a look at this post about retrieving images via Javascript https://stackoverflow.com/questions/6994212/is-there-a-way-to-return-a-list-of-all-the-image-file-names-from-a-folder-using — Brent Boden, Jun 02 '17 at 13:09
Possible duplicate of [Is there a way to return a list of all the image file names from a folder using only Javascript?](https://stackoverflow.com/questions/6994212/is-there-a-way-to-return-a-list-of-all-the-image-file-names-from-a-folder-using) — AlphaQ, Jun 02 '17 at 13:16

score 0 · Answer 1 · answered Jun 02 '17 at 13:16

First, you can use this function to get a random number(for your context get numbers between 1,4)

function getRandomArbitrary(min, max) {
    return "0"+parseInt(Math.random() * (max - min) + min);
}

Then you can append to div an img with random src, for example:

var src = "img/countryname/countryname"+getRandomArbitrary(1,4)+".jpg";
$("#pista3").append('<img id="theImg" src="'+src+'" />');

Obviously you need to adapt these codes to your context, but that is the way.

Randomly choose img between foldersl in html

1 Answers1