I have a simple question to be asked here . I have created a working random generator at here :
var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
getPics.addEventListener("click", function(){
//array to store images for the random image generator
var picsGallery = new Array();
picsGallery = ["http://ift.tt/2eZ59td",
"http://ift.tt/2hdSUtw",
"http://ift.tt/2eZ5axh"]
//generate random no to select the random images
var rnd = Math.floor(Math.random() * picsGallery.length);
//change the pics locations of the source
randPics.src=picsGallery[rnd]
});
#randPics{
width: 300px;
height: 300px;
align-content: center;
}
<body>
<p>Display a random image each time the buttons is clicked!</p>
<p> You get a <span id="text"></span> </p>
<button class="getPics"> Click ! </button>
<br>
<img id="randPics" src="http://ift.tt/2sNEalD">
</body>
When user clicked on the button, the image source will randomly select one of the images in the array. However, I have a tiny bit of problem. How do I associate text to the images ? For example , if the user click the button and he get the images of pen , the text
You get a
should change to
You get a pen.
Thank you for your help !
Aucun commentaire:
Enregistrer un commentaire