javascript - 随机图像的innerHTML图像语法？

Question

我正在尝试使用按钮单击来随机显示图像和文本。我当前的代码可以使名称显示随机化，但图像出现损坏。从随机显示 div id=target 获取图像的正确语法是什么？

<input type="button" id="btnSearch" value="Randomize" onclick="GetValue();" />
<br>
<img id="target" src="/img/test.png">
<p id="message" > test </p>

<script>
const btn = document.querySelector("#btnSearch");

function GetValue()
{
    var quotes        = [
            { 
    name: "Roller Coaster",
    img: "/img/emojibase/rollercoaster.png",
  },
            { 
    name: "Rooster",
    img: "/img/emojibase/rooster.png",
  },
            { 
    name: "Rose",
    img: "/img/emojibase/rose.png",
  }
    ];   

    var random = quotes[Math.floor(Math.random() * quotes.length)];

    document.getElementById("message").innerHTML = random.name;
    document.getElementById("target").innerHTML = random.img;
}

btn.addEventListener("click", () => {
    GetValue();
});
</script>

Answer 1

您应该使用图像元素的 src 属性，而不是 innerHTML。

更改:

document.getElementById("target").innerHTML = random.img;

致:

document.getElementById("target").src = random.img;

<input type="button" id="btnSearch" value="Randomize" onclick="GetValue();" />
<br>
<img id="target" src="/img/test.png">
<p id="message" > test </p>

<script>
  const btn = document.querySelector("#btnSearch");

  function GetValue()
  {
      var quotes        = [
              { 
      name: "Roller Coaster",
      img: "/img/emojibase/rollercoaster.png",
    },
              { 
      name: "Rooster",
      img: "/img/emojibase/rooster.png",
    },
              { 
      name: "Rose",
      img: "/img/emojibase/rose.png",
    }
      ];   

      var random = quotes[Math.floor(Math.random() * quotes.length)];

      document.getElementById("message").innerHTML = random.name;
      document.getElementById("target").src = random.img;
  }

  btn.addEventListener("click", () => {
      GetValue();
  });
</script>