Javascript Random image with text on click button

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

<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>

And my button in the HTML

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

Any help is very much appreciated. Thank you.