Question

基本上，我正在制作文字游戏。问题是每当你点击按钮，它就会成为一个全新的页面。我想在旧的下方插入新场景，就像发短信的应用程序一样。无论我做什么，我都无法理解，我一直打破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>

什么才能做到这一点，而不是改为一个完整的不同页面，它将它插入下面，再次像一条消息？

Answer 1

你必须处理一些问题。见如下。

必须为falsy添加undefined值的条件，例如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
```
如果内部没有内容，则div元素的高度为0，因此您必须通过 CSS 或 JavaScript 将高度设置为特定值。您可以在reference中看到#images { background-size: 100% 100%; height: 200px; }元素的默认大小。请参阅以下 CSS 内容。
```
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);会抛出异常，因此我将其删除。以下示例目前只是一个可执行演示。您可以看到编辑以查找您可能需要的短信APP版本。

#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>

you cannot have multiple threads sharing the same instances of Realm objects

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

1 个答案: