尝试让 JS 使用数组替换 innerHTML 内容进行文本冒险

Question

我正在尝试使用 javascript 创建一个非常小的文字冒险。第一个 "page" 包含一个用于在 div 中输入信息的表单，我想在每次用户按下 "next" 时替换 div 中的信息。

代码：

let name = [],
  age = [],
  place = [],
  verb = [];

document.getElementByID('story');

function nextPage() {
  let i = 0;
  i < showInfo.length;
  i++;


  let story = document.getElementById('story');
  let story.innerHTML = showInfo;
  let showInfo = [page1, page2, page3];
  let page1 = `Div replacement content 1`;
  let page2 = `Div replacement content 2`;
  let page3 = `Div replacement content 3`;
}

input[type="text"] {
  width: 100px;
}

<div id="story">
  <form>
    <h2>Start Your Adventure!</h2>
    <h3>Who are you?</h3>
    <p>Name: <input type="text" name="name" placeholder="Jessica"></p>
    <p>Age: <input type="text" name="age" placeholder="twenty"></p>
    <p>Hometown:<br>
      <input type="radio" name="place" id="Portland">Portland<br>
      <input type="radio" name="place" id="Vancouver">Vancouver<br></p>
    <p>Favorite activity:<br>
      <input type="radio" name="verb" id="swimming">Swimming<br>
      <input type="radio" name="verb" id="running">Running<br>
      <input type="radio" name="verb" id="cooking">Cooking<br></p>
  </form>
</div>
<button onclick="nextPage()">Next</button>

Answer 1

您非常接近，主要问题是变量的顺序，以及您必须跟踪每次点击所处页面的事实：

let name = [],
  age = [],
  place = [],
  verb = [],
  curPage = 0;



function nextPage() {
  let page1 = `Div replacement content 1`;
  let page2 = `Div replacement content 2`;
  let page3 = `Div replacement content 3`;
  let showInfo = [page1, page2, page3];

  let story = document.getElementById('story');
  story.innerHTML = showInfo[curPage];
  if (curPage < 2) {
    curPage++;
  }

}

input[type="text"] {
  width: 100px;
}

<div id="story">
  <form>
    <h2>Start Your Adventure!</h2>
    <h3>Who are you?</h3>
    <p>Name: <input type="text" name="name" placeholder="Jessica"></p>
    <p>Age: <input type="text" name="age" placeholder="twenty"></p>
    <p>Hometown:<br>
      <input type="radio" name="place" id="Portland">Portland<br>
      <input type="radio" name="place" id="Vancouver">Vancouver<br></p>
    <p>Favorite activity:<br>
      <input type="radio" name="verb" id="swimming">Swimming<br>
      <input type="radio" name="verb" id="running">Running<br>
      <input type="radio" name="verb" id="cooking">Cooking<br></p>
  </form>
</div>
<button onclick="nextPage()">Next</button>

尝试让 JS 使用数组替换 innerHTML 内容进行文本冒险

Trying to get JS to replace innerHTML content using an array for text adventure

html

javascript

arrays

text

innerhtml