Блог

Я создаю игру, в которой на основе выбора, сделанного игроком, будет отображаться новый текст на выбор. Я пытаюсь соединить изображения с этим текстом, чтобы они отображались при каждом выборе. Прямо сейчас мой текст работает, но мои изображения не подтягиваются.

Что я здесь делаю не так?

   <script type ="text/javascript">
    const textElement = document.getElementById('text')
    const optionButtonsElement = document.getElementById('option- 
     buttons')
    
    let state = {}

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

      function showTextNode(textNodeIndex) { 
     const textNode = textNodes.find(textNode => textNode.id === 
     textNodeIndex)
      textElement.innerText = textNode.text
      document.getElementById('img').src=textNode.img
      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 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)
        showTextNode(nextTextNodeId)
            }
      
        const textNodes = [
        {
        id: 1,
        Image:url('invitation.jpg'),
        text: "You are cordially invited to celebrate Sir Troy 
        Bennet's 70th birthday! RSVP to attend the event this 
        evening at the Cherry Hill mansion.",
        options: [
        {
        text: 'RSVP',
        nextText: 2
        },
        {
        text: "I'm going to stay home",
        nextText: 24
        }
         ]
          },
 

Для этого потребуется больше контекста, такого как воспроизводимый пример в JSFIDDLE или CODEPEN… однако, основываясь на том, что я вижу, в вашем коде говорится;

 textNode.img
 

Когда вы ищете;

 textNode.Image
 

В строке 17;

 document.getElementById('img').src=textNode.img
 

Итак, вам нужно изменить Image:url('invitation.jpg'), , чтобы быть img:url('invitation.jpg'), или обновить textNode.img , чтобы быть textNode.Image , как указано выше.