mardi 8 septembre 2020

random image and paired text pick javascript

I have images and texts to display to people as a result when they upload their pic in input box.

I want set-images and texts to be shown to them as a pair but it should be picked randomly in the pool.

So, simply saying,

people upload their pics to input box.

one of matched image and text in the pool randomly to be appeared to them as a result.

please give me some advice. I'm stuck in here for a week!!

here is my HTML

<p>
<input class="Randombutton" style="float: left;" type="button" 
value="Randomize" onclick="randomImg()">
</p>

here is my JS

<script>
function randomImg(){
        var quote = [
            {
                text: "1",
                img: "Img/1.jpg"},
            
            {
                text: "2",
                img: "Img/2.jpg"},
            
            {
                text: "3",
                img: "Img/3.jpg"},
            
            {
                text: "4",
                img: "Img/4.JPG"},
        ];
    var quote = quotes[Math.floor(Math.random() * quotes.length)];
        document.getElementById("quote").innerHTML =
            '<p>' + quote.text + '</p>' +
            '<img src="' + quote.img + '">';
    }
</script>



Aucun commentaire:

Enregistrer un commentaire