I am creating a text adventure game I want one of the option butttons to be a link to another webpage. So far I have: '''
<article>
<div id="text"></article>
</div>
<input id="input" onkeydown='submitDogName(this)' placeholder='Type Your Dogs Name and Enter to Begin'>
<div id="buttonBox"></div>
<script>
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 yerdog;
//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) {
yerdog = 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", yerdog);
};
//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) {
changeText(s.text)
changeButtons(s.buttons)
};
// and append it to where you'd like it to go:
document.body.appendChild(element);
//this is the object that holds each scenario, the more you add the more options there are
//scenario = {}
var scenario = {
one: {
image: "", //dog
text: "You have finally decided to take your dog out for a walk. You smile and pat your trusty
companion's head. What the dog's name?\n",
},
two: {
image: "https://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.five)"]]
// and append it to where you'd like it to go:
document.body.appendChild(element);
},
''' Everything else works, I just want one of the buttons to be a hyperlink. I can't have it as a link at all times because I want the link to appear for only certain scenarios, not all the time. Or is it possible just to replace the window when the user gets to scenario 5??
