I have this section of code, I have gotten it to work as text that appears changes when you click a button. It's based off of some code from a "choose your own story" sort of thing. (Source: https://github.com/WebDevSimplified/JavaScript-Text-Adventure)
Everything works except the image that I really don't know how to add. I've been stuck on it for days because I can't find anything for this specific element.
How would I get an image to load inside this element so that it appears and dissapears a long with my text and buttons?
const textNodes = [{
id: 1,
text: "I did it all for you.",
//here is where I have attempted to use a variable to insert an image, with 20 being the height (I am very inexperienced)//
imageOne: 20,
options: [{
text: '>>',
nextText: 2,
}]
},
{
I've also tried this which copies the format of my option buttons, but it doesn't seem to work either:
image: [{
**url: "https://images.unsplash.com/photo-1544526226-d4568090ffb8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
}],
Here's what I have in my html file:
<!DOCTYPE html>
<html lang="en">
<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="OP1.0c.css" rel="stylesheet">
<script defer src="OP1.0j.js"></script>
<title>Text Adventure</title>
</head>
<body>
<div class="container">
<div id="story"></div>
</div>
<div id="pictures">
<image class="image"></image>
</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>
</html>