Замена изображений текстом

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

Что я здесь делаю неправильно?

  <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
        }
         ]
          },
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
108
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потребует большего контекста, такого как воспроизводимый пример на 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, как указано выше.

эй, большое спасибо за комментарий. Я внес изменение, но изображение все равно не подтянулось. Добавление JSFIDDLE jsfiddle.net/lazytitan97/sz2dp0eu

user14709621 11.12.2020 06:29

@ lazyTitan91 - корпус важен. Вы сделали textNode.image, а не textNode.Image - вы также используете DIV, DIV не может поддерживать изображения с использованием document.getElementById('img').src - поэтому измените этот IMG div на; <img id = "img" src = ""> - jsfiddle.net/xzjmb5pr

Dexterians 11.12.2020 06:44

@lazyTitan91 lazyTitan91 также ваш код действительно противоречив. Где-то вы называете это Image, где-то Img — нужно быть последовательным.

Dexterians 11.12.2020 06:49

@dDexterians Спасибо за помощь! Я очень устал, поэтому пропустил несколько моментов. Исправлено и работает сейчас. Супер ценю!

user14709621 11.12.2020 07:15

Другие вопросы по теме