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

Issue

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.

Solution

Add the images into the textNodes object, the you can easely use therefrom.

Here is my solution for this problem

const textElement = document.getElementById('text');
const image = document.getElementById('illustration');
const optionButtonsElement = document.getElementById('option-buttons');

let state = {};

function startGame() {
  state = {};
  showTextNode(1);
}

const textNodes = [
    {
      id: 1,
      img: 'kezdet.png',
      text: 'Kalandod egy faluban kezdődik. Egy falusi áll elötted. Mit teszel?',
      options: [
        {
          text: 'Odamegyek hozzá',
          nextText: 2
        },
        {
          text: 'Kimegyek a faluból',
          nextText: 3
        }
      ]
    },
    {
      id: 2,
      img: 'beszel.png',
      text: 'A falusi köszön neked: - Jó napot kívánok! Mit teszel?',
      options: [
          {
          text: 'Elfutok',
          //requiredState: (currentState) => currentState.blueGoo,
          //setState: { blueGoo: false, shield: true },
          nextText: 3
        },
        {
          text: 'Köszönöm neki.',
          //requiredState: (currentState) => currentState.blueGoo,
          //setState: { blueGoo: false, sword: true },
          nextText: 4
        }
      ]
    },
  ];
    
    
function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
  textElement.innerText = textNode.text;
  while (optionButtonsElement.firstChild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild);
  }

  textNode.options.forEach(option => {
    if (showOption(option)) {
      const button = document.createElement('button');
      button.innerText = option.text;
      button.classList.add('btn');
      button.addEventListener('click', () => selectOption(option));
      optionButtonsElement.appendChild(button);
    }
  });
}

function showImage(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
    image.style.backgroundImage="url(" + textNode.img + ")"; 
}

function showOption(option) {
  return option.requiredState == null || option.requiredState(state);
}

function selectOption(option) {
  const nextTextNodeId = option.nextText;
  if (nextTextNodeId <= 0) {
    return startGame();
  }
  state = Object.assign(state, option.setState);
  console.log('állapot: ' + JSON.stringify(state));
  showTextNode(nextTextNodeId);
  showImage(nextTextNodeId);
}

startGame();

body {
    font-family: sans-serif;
    padding: 0;
    margin: 0;
    background-color: #333;
}

div#title{
    margin-left: auto;
    margin-right: auto;
    min-height: 100px;
    height: 30%;
    width: 90%;
    background: url(logo.png);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center center;
}

.container {
    margin: 0px auto;
    margin-top: 50px;
    display: block;
    width: 90%;
    max-width: 1000px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px;
}

div#illustration {
    box-sizing: content-box;
    margin: 20px auto;
    padding: 5px;
    max-width: 800px;
    width: 90%;
    min-height: 300px;
    background: url(kezdet.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

div#text {
    box-sizing: content-box;
    padding: 10px;
    background-color: lightblue;
    border-radius: 5px;
    box-shadow: 1px 2px 5px grey;
    text-align: center;
    font-size: 24px;
    height: 100px;
    margin-bottom: 20px;
}

div#option-buttons {
    border-radius: 5px;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    margin-top: 20px;
}

.btn {
    font-size: 24px;
    background-color: hsl(200, 100%, 50%);
    border: 1px solid hsl(200, 100%, 30%);
    border-radius: 5px;
    padding: 15px 10px;
    color: white;
    outline: none;
    box-shadow: 1px 2px 5px grey;
}

.btn:hover {
    border-color: black;
}

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles.css" rel="stylesheet">
  <script defer src="game.js"></script>
  <title>Peti Minecraft kalandja</title>
</head>
<body>
  <div class="container">
        <div id="title"></div>
        <div id="illustration"></div>
        <div id="text">Text</div>
        <div id="option-buttons" class="btn-grid">
            <button class="btn">Option 1</button>
            <button class="btn">Option 2</button>
            <button class="btn">Option 3</button>
            <button class="btn">Option 4</button>
        </div>
  </div>
</body>
</html>

Answered By - exphoenee

Answer Checked By - Senaida (PHPFixing Volunteer)