ok so basically I'm doing an assignment for school and its a text based adventure game and i was wondering how to add text to a page after you pick a choice this is my work in javascript thus far:
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 = '';
}
and this is on my second javascript page which is linked with the original through HTML so i can put it on a web page
var MyStory = ['test', 'test', 'test'];
const Page = [0, 0, 0];
some help would be much apricated I thought maybe I could do it some way with CSS but again I wouldn't know how to go about doing that also heres my 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>
you did not post your HTML, but basically easiest way how to add an image by JS is to: add it to your html and hide it with CSS
<div id="image" style="display:none">
<img src="YOUR_IMAGE" width="200px" height="200px" />
</div>
and show it when needed with JS
document.getElementById('image').style.display = "contents";