Basically, I'm making a text game. The problem is whenever you click on the button, it makes it a whole new page. I want to insert the new scene below the old, like a texting app. I cannot figure it out no matter what I do, I keep breaking the Javascript.
//these variables connect our code with the 'id' on the html
//we can then manipulate the variables and it will manipulate the html
var images = document.getElementById("images");
var text = document.getElementById("text");
var buttonBox = document.getElementById('buttonBox');
var input = document.getElementById('input');
//this is the variable for the name of the character
var hero;
//this is how after we type in the character name and hit enter
//we will add the name to the variable, remove the input box and start our first scenario
input.onkeypress = function(event) {
console.log(input.value);
if (event.key == "Enter" || event.keyCode == 13) {
hero = input.value;
input.parentNode.removeChild(input)
advanceTo(scenario.two)
}
};
//this changes the text and puts in your characters name
var changeText = function(words) {
text.innerHTML = words.replace("Your dog", hero);
};
//this takes the image link and puts it in the proper format, sending it to the html
var changeImage = function(img) {
images.style.backgroundImage = "url(" + img + ")";
};
//this looks at the number of options we have set and creates enough buttons
var changeButtons = function(buttonList) {
buttonBox.innerHTML = "";
for (var i = 0; i < buttonList.length; i++) {
buttonBox.innerHTML += "<button onClick="+buttonList[i][1]+">" + buttonList[i][0] + "</button>";
};
};
//this is what moves the game along
var advanceTo = function(s) {
changeImage(s.image)
changeText(s.text)
changeButtons(s.buttons)
};
//this is the object that holds each scenario, the more you add the more options there are
//scenario = {}
var scenario = {
one: {
image: "http://s9.postimg.org/eceo9mp73/5860028206_d66810105f_b.jpg", //dog
text: "H-hello? Yes! Yes! It's working! Is anyone there? Hello? If you're there, what's your name?",
},
two: {
image: "http://s9.postimg.org/9p8m7v1u7/6899639786_d517c4cce3_z.jpg", //house
text: "Your dog yanks at the leash. You hear dogs barking and see an old abandoned house. Strangely, the door is wide open. What do you want to do?",
buttons: [["Turn and run", "advanceTo(scenario.three)"],["Enter The House", "advanceTo(scenario.four)"]]
},
three: {
image: "http://1.bp.blogspot.com/-83pWE4JxQxM/ViiOd_7nGTI/AAAAAAAADUg/yCJ8iAB-gMY/s1600/postapoc5.jpg",//"http://s4.postimg.org/t1g20apst/261819008_d4316c1bdf_o.jpg",
text: "A wild gang of rabid dogs are gaining on you. Against your better judgement you enter the creepy house for saftey. Your dog is whincing and may be injured.",
buttons: [["continue", "advanceTo(scenario.four)"]]
},
four: {
image: "http://s6.postimg.org/kz5m1cnkh/2919478782_c343d14be6_b.jpg",
text: "Your dog has run, barking loudly, into the basement. You wonder what's down there. The door jammed when you slammed it behind you. You are going to need something to pry it back open",
buttons: [["Follow your Dog Downstairs", "advanceTo(scenario.five)"],["Search the Kitchen for a knife", "advanceTo(scenario.five)"]]
},
five: {
image: "http://s6.postimg.org/kz5m1cnkh/2919478782_c343d14be6_b.jpg",
text: "TO BE CONTINUED...",
},
};
//this is the code that starts the game
advanceTo(scenario.one);
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>The Help</title>
<link rel="stylesheet" href="css/style.css">
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
</head>
<body>
<html>
<body>
<div id="images">
</div>
<div id="text">
</div>
<input id="input" onkeydown='submitDogName(this)' placeholder='What is your name?'>
<div id="buttonBox">
</div>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
What would make it so instead of changing to a complete different page, it inserts it below, again like a message?
