Tengo esta sección de código, conseguí que funcione como texto que aparece y cambia cuando haces clic en un botón. Se basa en un código del tipo "elige tu propia historia". (Fuente: https://github.com/WebDevSimplified/JavaScript-Text-Adventure )
Todo funciona excepto la imagen que realmente no sé cómo agregar. He estado atascado durante días porque no puedo encontrar nada para este elemento específico.
¿Cómo puedo hacer que una imagen se cargue dentro de este elemento para que aparezca y desaparezca mucho con mi texto y botones?
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, }] }, {También probé esto que copia el formato de mis botones de opción, pero tampoco parece funcionar:
image: [{ **url: "https://images.unsplash.com/photo-1544526226-d4568090ffb8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" }],Esto es lo que tengo en mi archivo html:
<!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>