dimanche 30 juillet 2017

How to associate an text to image in Javascript?

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