innerHTML image syntax for randomized image?

Question

I'm trying to use a button click to randomly display an image and text. My current code works to randomise the name display, but the image comes up broken. What is the correct syntax for having the image from random display 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>

Mamun · Accepted Answer · 2020-02-08 01:11:15Z

Instead of the innerHTML you should use the src attribute of the image element.

Change:

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

To:

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>

Collectives™ on Stack Overflow

innerHTML image syntax for randomized image?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related