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

Question

我正在尝试使用 JavaScript 创建一个非常小的文本冒险。第一个“页面”包含一个在div中输入信息的表单，我想在每次用户按“下一步”时替换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>