picka card

Hi,

Can anyone tell me how to do this - or point me in the direction of some code that is close.

I want the user of a website to be able to click on a button called, for example, 'pick' and the code to return to the screen with a randomly chosen jpeg from a finite list along with some text describing it. For example 1 out of 52 jpegs representing a full pack of cards alongside the text 'Jack of Clubs', Or a random photo from my photo gallery as well as the text 'Pretty Picture'.

Any help gratefully received

Here is some code to get you started. I didn't test it so you may have to play with it but it will get you started.



//first get a randomly generated number
function RandomNumber(){
return Math.ceil(Math.random()*deckJpgArray.length);
}

//have an array of jpeg paths
deckJpgArray = new Array();

deckJpgArray[0] = 'pathto/acehearts.jpg';
deckJpgArray[1] = 'pathto/twohearts.jpg';
deckJpgArray[2] = 'pathto/threehearts.jpg';
//etc for the whole deck

//do the picking and displaying

function pickCard(){
document.getElementById('cardDisplay').innerHTML = '<img src="'+deckJpgArray[RandomNumber()]+'"/>';
}



the html would be something like


<div id="cardDisplay"></div>
<div><input type="button" onclick="pickCard();" value="pick"/></div>

Thank you very much - thats excellent


Andy

Did it really work?

I wrote it really quick and didn't check if it had any bugs. I would be careful with it.

One thing you should check that I am worried about is if the first and the last card in the deck come up just as much as the other. That is always the tricky part of doing something like this. I did Math.ceil and it may have to be math.floor.

I am glad it helped though. that is awesome.

Math.floor would be the one to use for arrays