'How does one add an image to different id's in a constant in javascript for a text based adventure game?

I am following this tutorial to build a text based adventure game. Here is the code for the entire game that is mine too.

I'd like to add an image to each page of the game. For example, this:

const textNodes = [
  {
    id: 1,
    text: 'you walk down the road blah blah',
    options: [
      {
        text: 'Take the goo',
        setState: { blueGoo: true },
        nextText: 2
      },
      {
        text: 'Leave the goo',
        nextText: 2
      }
    ]

is a constant where i'd like to add the image to. This:

var imagesDatabase = {
    '1': src="images/bs1.jpg",
    '2': src="images/bs2.jpg",
    '3':src="images/bulb.png"
} 

  var theImageDiv = document.createElement('div');
  theImageDiv.innerHTML = "<img id='the-image-bro' src='" + imagesDatabase[textNodeIndex] + "' height=150 length=500 style='position: fixed; top: 50%'>"
  
  document.getElementById('imagediv').appendChild(theImageDiv);

is the code someone in the comments suggested but it doesn't work for me. Especially the innerHTML = I don't know what to write there then. All I wanna do is add an image to each page of the game.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source