ok, básicamente estoy haciendo una tarea para la escuela y es un juego de aventuras basado en texto y me preguntaba cómo agregar texto a una página después de elegir una opción, este es mi trabajo en javascript hasta ahora:
var BookMark = 0; var StoryHere = 0; var Choice1Here = 0; var Choice2Here = 0; function StartStory() { StoryHere = document.getElementById('Story'); Choice1Here = document.getElementById('Choice1'); Choice2Here = document.getElementById('Choice2'); postPage(); return; } function Choice1() { console.log('Choice 1 clicked ->' + BookMark); BookMark = Page[BookMark + 1] * 3; clearPage(); setTimeout(postPage, 1000); return; } function Choice2() { console.log('Choice 2 clicked ->' + BookMark); BookMark = Page[BookMark + 2] * 3; clearPage(); setTimeout(postPage, 1000); return; } function postPage() { StoryHere.innerHTML = MyStory[BookMark]; Choice1Here.innerHTML = MyStory[BookMark + 1]; Choice2Here.innerHTML = MyStory[BookMark + 2]; } function clearPage() { StoryHere.innerHTML = ''; Choice1Here.innerHTML = ''; Choice2Here.innerHTML = ''; }y esto está en mi segunda página de javascript que está vinculada con el original a través de HTML para que pueda ponerlo en una página web
var MyStory = ['test', 'test', 'test']; const Page = [0, 0, 0];Me vendría muy bien un poco de ayuda. Pensé que tal vez podría hacerlo de alguna manera con CSS, pero nuevamente, no sabría cómo hacerlo. También aquí está mi html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>story time</title> <link rel="stylesheet" href="style.css"> <script src="story_book.js"></script> <script src="story_main.js"></script> </head> <body onload="StartStory();"> <div id="Story"> </div> <div id="Choice1" onclick="Choice1();"> </div> <div id="Choice2" onclick="Choice2();"> </div> </body> </html>no publicó su HTML, pero básicamente la forma más fácil de agregar una imagen por JS es: agregarla a su html y ocultarla con CSS
<div id="image" style="display:none"> <img src="YOUR_IMAGE" width="200px" height="200px" /> </div>y mostrarlo cuando sea necesario con JS
document.getElementById('image').style.display = "contents";