时间戳

首页 > 解决方案 > Javascript 随机图像，点击按钮上有文字

javascript - Javascript 随机图像，点击按钮上有文字

问题描述

我一直在关注其他一些教程，并设法让图像与特定文本相结合以在加载时显示，并在刷新后获得不同的图像和组合文本。

但现在我想将它连接到一个按钮，所以文本和图像的随机组合只在点击时显示，按钮不做任何事情。

头部标签中的 Javascript

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

很感谢任何形式的帮助。谢谢你。

标签： javascriptfunctionbuttonrandomhyperlink

解决方案

这是否满足您的需求？

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()">

推荐阅读