Javascript带有单击按钮上的文本的随机图像

Question

I've been following some other tutorials and managed to get an image combined with specific text to display on load and a different image and combined text after refresh.

But now i want to connect it to a button so the random combination of text and image only show on click, the button doesn't do anything.

Javascript in the head tags

 <div id="quote"></div> <input class="Randombutton" style="float: left;" type="button" value="Randomize" onclick="randomImg()"> <script> (function randomImg() { var quotes = [ { text: "BIO1", img: "images/captainamerica.jpg" }, { text: "BIO2", img: "images/hulk.jpg", }, { text: "BIO3", img: "images/spiderman.jpg", }, { text: "BIO4", img: "images/blackwidow.jpg", }, { text: "BIO5", img: "images/ironman.png", }, ]; var quote = quotes[Math.floor(Math.random() * quotes.length)]; document.getElementById("quote").innerHTML = '<p>' + quote.text + '</p>' + '<img src="' + quote.img + '">'; })(); </script> 

Any help is very much appreciated. Thank you.

Answer 1

Does this meet what you need?

 function randomImg() { var quotes = [ { text: "BIO1", img: "images/captainamerica.jpg" }, { text: "BIO2", img: "images/hulk.jpg", }, { text: "BIO3", img: "images/spiderman.jpg", }, { text: "BIO4", img: "images/blackwidow.jpg", }, { text: "BIO5", img: "images/ironman.png", }, ]; var quote = quotes[Math.floor(Math.random() * quotes.length)]; document.getElementById("quote").innerHTML = '<p>' + quote.text + '</p>' + '<img src="' + quote.img + '">'; } 

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