Я делаю игру, в которой на основе выбора, сделанного игроком, будет появляться новый текст на выбор. Я пытаюсь соединить изображения с этим текстом, чтобы они подтягивались при каждом выборе. Прямо сейчас мой текст работает, но мои изображения не подтягиваются.
Что я здесь делаю неправильно?
<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
, как указано выше.
@ lazyTitan91 - корпус важен. Вы сделали textNode.image
, а не textNode.Image
- вы также используете DIV, DIV не может поддерживать изображения с использованием document.getElementById('img').src
- поэтому измените этот IMG div на; <img id = "img" src = "">
- jsfiddle.net/xzjmb5pr
@lazyTitan91 lazyTitan91 также ваш код действительно противоречив. Где-то вы называете это Image
, где-то Img
— нужно быть последовательным.
@dDexterians Спасибо за помощь! Я очень устал, поэтому пропустил несколько моментов. Исправлено и работает сейчас. Супер ценю!
эй, большое спасибо за комментарий. Я внес изменение, но изображение все равно не подтянулось. Добавление JSFIDDLE jsfiddle.net/lazytitan97/sz2dp0eu