如何使下一个场景插入下面，而不是让它创建一个新页面

基本上，我正在制作文字游戏。问题是，每当您单击按钮时，它都会使其成为一个全新的页面。我想像发短信的应用一样插入旧场景。无论我做什么，我都无法弄清楚，我不断打破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>

是什么将使它如此，而不是更改为完全不同的页面，它将其插入下面，再次像一条消息一样？

您必须处理一些问题。请参阅下面。

必须像undefined这样的falsy值添加条件。请参阅以下修改。

var changeButtons = function(buttonList) {
  if(!buttonList) return; // Here.
  buttonBox.innerHTML = "";
  for (var i = 0; i < buttonList.length; i++) {
    buttonBox.innerHTML += "<button onClick="+buttonList[i][1]+">" + buttonList[i][0] + "</button>";
  };
};

使用单个报价在背景图像中引用url的值。请参阅以下修改。

var changeImage = function(img) {
  images.style.backgroundImage = "url('" + img + "')"; // Here.
};

div元素的高度为0，如果内部没有内容，则必须通过 CSS 或 Javascript 设置特定值。您可以从参考中看到div元素的默认大小。请参阅下面的 CSS 内容。
```
#images {
  background-size: 100% 100%;
  height: 200px;
}
```

现在，您可以看到下面的完整示例，您可能会意识到onkeydown='submitDogName(this)'会抛出异常，因此我将其删除。以下示例只是目前可执行的演示。您可以看到编辑对于可能需要的短信应用程序。

//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) {
  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) {
  if(!buttonList) return;
  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);

#images {
  background-size: 100% 100%;
  height: 200px;
}

<!DOCTYPE>
<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>
  <div id="images">
  </div>
  <div id="text">
  </div>
  <input id="input" placeholder='What is your name?'>
  <div id="buttonBox">
  </div>
  <script src="js/index.js"></script>
</body>
</html>

编辑

我认为这就是您所寻找的。检查一下，告诉我是否是。

//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) {
  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) {
  if(!buttonList) return;
  buttonBox.innerHTML = "";
  for (var i = 0; i < buttonList.length; i++) {
    buttonBox.innerHTML += "<button onClick="+buttonList[i][1]+">" + buttonList[i][0] + "</button>";
  };
};
var appendHistory = function() {
  var historyDiv = document.getElementById("history");
  var historyItemDiv = document.createElement("div");
  historyItemDiv.appendChild(images.cloneNode(true));
  historyDiv.appendChild(historyItemDiv);
}
//this is what moves the game along
var advanceTo = function(s) {
  changeImage(s.image)
  changeText(s.text)
  changeButtons(s.buttons)
  if(!s.isLast) appendHistory();
};
//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?",
    isLast: false
  },
  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)"]],
    isLast: false
  },
  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)"]],
    isLast: false
  },
  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)"]],
    isLast: false
  },
  five: {
    image: "http://s6.postimg.org/kz5m1cnkh/2919478782_c343d14be6_b.jpg",
    text: "TO BE CONTINUED...",
    isLast: true
  },
};
//this is the code that starts the game
advanceTo(scenario.one);

#images {
  background-size: 100% 100%;
  height: 200px;
}
#history > div:last-child {
  display: none;
}

<!DOCTYPE>
<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>
    <div id="history"></div>
    <div id="images"></div>
    <div id="text"></div>
    <input id="input" placeholder='What is your name?'/>
    <div id="buttonBox"></div>
    <script src="js/index.js"></script>
  </body>
</html>

相关内容

最新更新

热门标签：