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

Question

I'm trying to create a very small text adventure using javascript. The first "page" contains a form to input information in the div, and I want to replace the information in the div every time the user presses "next".

CODE:

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

You were pretty close, the main issue was with the order of your variables, and the fact that you have to keep track what page you're on with each click:

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>